Download & Get Started with Froala Pages

Build beautiful web pages in a few minutes with our free Froala Page builder.

Froala Pages is available for download via 3 flexible options — ZIP format, Install from NPM, or directly from CDN. Choose the option that works best for you.

Dive deeper into our documentation

Refer to the Froala Pages Documentation for more information about API options, methods and other useful guides.

1 Download Zip Format

Fill out the form below to get the latest zip version. The zip archive contains the minified source code of the Froala Pages. Unzip the package upon download.

Please read the Froala Pages License Agreement before using the product

2 Initialize Froala Pages

Create div tag anywhere in HTML body with id as ‘selector-id’

<div id='selector-id'></div>

Then, initialize Froala Pages.

var pages = new FroalaPages('selector-id')

3 Display Content

Once you are done with the installation step include the following CSS files. These will ensure that you preserve the look of the edited HTML outside of the Froala Pages.

!-- Bootstrap and Froala Design Blocks. -->
    <link href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css' rel='stylesheet' type='text/css' />
    <link href='https://cdn.jsdelivr.net/gh/froala/design-blocks@master/dist/css/froala_blocks.min.css' rel='stylesheet' type='text/css' />

That’s it! You are all set to creating beautiful web pages with the Froala Page Builder!

1 Install from NPM

Froala pages is available to download from npm.js npm install froala-pages

After the installation process is complete, embed this code inside your HTML file:

<link href='node_modules/froala-pages/css/froala_pages.min.css' rel='stylesheet' type='text/css' />
<script type='text/javascript' src='node_modules/froala-pages/js/froala_pages.min.js'></script>
<script type='text/javascript' src='node_modules/froala-pages/js/pages_design_blocks_pkgd.min.js'></script>

2 Initialize Froala Pages

Create div tag anywhere in HTML body with id as ‘selector-id’

<div id='selector-id'></div>

Then, initialize Froala Pages.

var pages = new FroalaPages('selector-id')

3 Display Content

Once you are done with the installation step include the following CSS files. These will ensure that you preserve the look of the edited HTML outside of the Froala Pages.

!-- Bootstrap and Froala Design Blocks. -->
<link href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css' rel='stylesheet' type='text/css' />
<link href='https://cdn.jsdelivr.net/gh/froala/design-blocks@master/dist/css/froala_blocks.min.css' rel='stylesheet' type='text/css' />

That’s it! You are all set to creating beautiful web pages with the Froala Page Builder!

1 Install from CDN

Use CDN to directly access the files and embed them inside your HTML file

<link href='https://cdn.jsdelivr.net/npm/froala-pages/css/froala_pages.min.css' rel='stylesheet' type='text/css' />
<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/froala-pages/js/froala_pages.min.js'></script>
<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/froala-pages/js/pages_design_blocks_pkgd.min.js'></script>

2 Initialize Froala Pages

Create div tag anywhere in HTML body with id as ‘selector-id’

<div id='selector-id'></div>

Then, initialize Froala Pages.

var pages = new FroalaPages('selector-id')

Then, initialize Froala Pages.

3 Display Content

Once you are done with the installation step include the following CSS files. These will ensure that you preserve the look of the edited HTML outside of the Froala Pages.

!-- Bootstrap and Froala Design Blocks. -->>
<link href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css' rel='stylesheet' type='text/css' />
<link href='https://cdn.jsdelivr.net/gh/froala/design-blocks@master/dist/css/froala_blocks.min.css' rel='stylesheet' type='text/css' />

That’s it! You are all set to creating beautiful web pages with the Froala Page Builder!