Days
Hours
Minutes
Seconds
x

Froala Editor v4.1.4 is Here LEARN MORE

Skip to content

A Page Builder for any modern app

Include page building experience in your application without reinventing the wheel and at no cost to you
Browser with six windows open showing images and articles with one image in color being dragged and dropped into place.

Edit and Design Modes

Edit and Design in the same place, but not with the same interface. The UI has built-in modes, each of them conceived to optimize your focus on what you need.
Four horizontal bold lines with the top bar in blue and the bottom three lines in grey.

Edit

A true What You See Is What You Get interface to edit the content on your web page.

A blue rectangle with gray lines going into the rectangle and out into another gray rectangle beneath it.

Design

Optimized for searching and combining design blocks that form a web page.

A young man standing next to a massive smart phone with text editing mobile applications at his feet.

Design Blocks

Froala Pages is using a modular concept of designing web pages. Design blocks accelerate the design process and offers uniformity and consistency among different sections of your website.

Default Blocks

Use the JavaScript page builder right away with Froala Design Blocks.

Custom Blocks

Need something different? Build your own block to use with Pages.

Responsive

The default design blocks are responsive and have been tested.

Device Views

Don’t take our word for it, use the device views: , , , and .

Design

Modern Design

We carefully analysed the latest industry trends and designed a nice modern interface that the users will love.

Intuitive UI

Froala page builder was designed with usability in mind and has a very intuitive UI that users will find natural to use.

Drag & Drop

People love drag & drop because it feels natural and makes things a lot easier.

Custom Toolbars

Too many buttons? Perhaps not in the right order? You have full control over the editor’s toolbar functionality on each screen size.

Custom Behavior

No two applications are the same and the page builder was built for any use-case. Everything can be customized or custom made.

SVG Icons

The page builder uses SVG icons, scalable vectorial icons that look gorgeous at any size and on any screen.

Froala WYSIWYG HTML Editor

Built by the same standards and inheriting all the benefits of our WYSIWYG Editor
Text editing module with word editing tools editing a blog with four hundred characters.

Easy to Integrate

The page builder can be integrated in any kind of projects in no time. It requires only basic JavaScript and HTML coding knowledge.

Easy to Upgrade

Keep all your customizations separated from the editor folder and upgrading is just a matter of downloading the new version.

High Quality Code

For us high quality code means LTFCE, in other words: Legible, Testable, Flexible, Compliant and Economical.

Cross Browser

Are you an Apple fan? Or Microsoft? It doesn’t matter, our editor will work the same on Safari, Internet Explorer and other browsers.

No Dependencies

No dependencies, not even jQuery, just pure Vanilla JavaScript. The go-to option for any developer in any stack.

Performant

Froala Pages is designed with performance in mind and will withstand the most rigorous tests.

By Devs, for Devs

Froala obsesses over developer experience. Code quality, architecture, documentation and guides make the Froala Page Builder a pleasure to use for any developer.

A young man working on a laptop wearing headphones with a blue grid design on the wall behind him.

Powerful API

Froala Page Builder comes with a powerful JavaScript API that allows you to easily customize and interact with the builder.

Rich Documentation

A powerful API accompanied by a complete documentation is what all developers dream to play around with.

Customizable Functionality

The page builder’s functionality is highly customizable. Use the API to change the default behavior or edit the source code.

Extendable

Specific websites may require specific features. Easily create a plugin to extend the Froala Page Builder’s functionality.

Get Started Now

Learn how to use Froala Pages and start building customized web interfaces
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1755183666" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1066979714" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1488161926" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>