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.
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.
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/[email protected]/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/[email protected]/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/[email protected]/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!
Dive deeper into our documentation
Refer to the Froala Pages Documentation for more information about API options, methods and other useful guides.
- Download
- ZIP Archive
- Use CDN
- Install from NPM
- Releases
- Froala Pages Documentation
ZIP Archive
The ZIP archive contains the minified source code of the Froala Pages. Unzip the package and take a look over the Get Started Guide to create your first working demo.
The ZIP archive for the latest version (1.0.3) can be downloaded using the button at the top of the page. For older versions, please check out our changelog.
Use CDN
Instead of downloading the Froala Pages you can use CDN to access the files directly. All files from our Get Started Guide are available on CDN and you can link to them like in the example below:
<!-- Include Pages style. -->
<link href='https://cdn.jsdelivr.net/npm/[email protected]/css/froala_pages.min.css' rel='stylesheet' type='text/css' />
<!-- Include JS files. -->
<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/[email protected]/js/froala_pages.min.js'></script>
<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/[email protected]/js/pages_design_blocks_pkgd.min.js'></script>
Install from NPM
Our JS Pages comes with NPM packages for multiple front-end frameworks. Here is an example of NPM usage:
npm install froala-pages
Dive deeper into our documentation
Refer to the Froala Pages Documentation for more information about API options, methods and other useful guides.