Building a Multi-Model AI Assistant in Froala Editor
Froala Editor’s AI Assist feature gives developers a clean way to bring generative AI directly into the editing experience. While
New Froala Editor v5.2.0 is here – Learn More
The JavaScript Rich Text Editor Built to Scale
Froala is a JavaScript WYSIWYG editor that integrates in minutes, scales with your product, and gives you 240+ configuration options to make it yours.
app.js
1import FroalaEditor from 'froala-editor';
2import 'froala-editor/css/froala_editor.pkgd.min.css';
3import 'froala-editor/css/froala_style.min.css';
4
5// Initialize the editor on any selector
6new FroalaEditor('#editor', {
7 toolbarSticky: true,
8 heightMin: 220,
9 placeholderText: 'Start writing…',
10 events: {
11 contentChanged() {
12 // sync to your backend
13 fetch('/api/save', { method: 'POST' });
14 }
15 }
16});
2import 'froala-editor/css/froala_editor.pkgd.min.css';
3import 'froala-editor/css/froala_style.min.css';
4
5// Initialize the editor on any selector
6new FroalaEditor('#editor', {
7 toolbarSticky: true,
8 heightMin: 220,
9 placeholderText: 'Start writing…',
10 events: {
11 contentChanged() {
12 // sync to your backend
13 fetch('/api/save', { method: 'POST' });
14 }
15 }
16});
40+
Plugins
300K+
Weekly downloads
240+
API Options
100+
API Events
220+
API Methods
40+
Plugins
300K+
Weekly downloads
240+
API Options
100+
API Events
220+
API Methods
Live Preview
See Froala in Action
Drop Froala into any vanilla JS or jQuery page. Works with your stack, your way.
froala-editor — live demo
Get Started in Minutes
Up and Running in
Three Steps
Three steps. Everything you need is included.
1
Install from NPM
Add Froala Editor to your project using your favorite package manager.
npm install froala-editor --save
2
Import the editor & styles
Reference the JavaScript bundle and the two stylesheets — no build wiring required.
import FroalaEditor from 'froala-editor'; import 'froala-editor/css/froala_style.min.css'; import 'froala-editor/css/froala_editor.pkgd.min.css';
3
Initialize the editor
Point Froala at any selector and you’re done.
// vanilla JS new FroalaEditor('#editor');
Why Froala
Six Reasons Developers
Choose Froala
From security and SEO to full customization, Froala handles the editor so you can focus on your product.
Secure
Froala ensures your content is secure against XSS attacks, sanitizing HTML on the client before it ever reaches your database.
SEO-friendly
Froala produces clean, semantic HTML out of the box — no client-only quirks, no SEO penalties.
Extensive Plugin Support
40+ official plugins — from track changes and tables to image managers backed by the storage layer of your choice.
Minimalist
A clean, focused interface that disappears when you don’t need it. Perfect for sites that demand a calm reading experience.
Mobile-friendly
The same editor that runs on desktop adapts gracefully to phones and tablets — touch gestures, responsive toolbars, the lot.
Customizable
240+ options, 220+ methods, 100+ events. Reshape the toolbar, swap icons, intercept everything — the editor is your editor.
Everything You Need, in One Place
From the Blog
Read, Learn, Build
Tutorials, deep dives, and trends straight from the Froala team — handpicked for JavaScript developers.
HTML WYSIWYG vs Code Editors: Which Is Better for Modern Content Teams?
Content creation sits at the center of nearly every digital-first organisation, and the tools teams use to produce that content
Converting Raw HTML Into a Visual Editing Interface
Picture handing a non-technical marketing manager a raw block of HTML and asking them to update a landing page. The
HTML Editor Linux Cross-Platform Options That Work
Linux has long been the operating system of choice for developers who value control, performance, and flexibility. But when it
Start Building Today
Ship Rich Text in Your JavaScript App in minutes
Sign up for a free Froala account, grab your API key, and follow the docs. The editor is in your app in three steps.
No credit card required · Free in development
FAQ
Frequently Asked Questions
What is Froala's JavaScript WYSIWYG editor?
Froala is a JavaScript-based WYSIWYG HTML editor that runs in any browser and integrates with any back-end. It handles secure image upload, file storage, and HTML sanitization, so the same editor works whether you ship a static site, a single-page app, or a server-rendered application.
Why should you choose the Froala JavaScript editor?
Because it’s framework-agnostic, fast to integrate, and ships with first-class server-side tooling. You get 40+ plugins, a clean API, full TypeScript types, and an editor trusted by developers generating 300,000+ downloads a week.
Does Froala work with vanilla JavaScript, jQuery, and modern frameworks?
Yes. The editor is plain JavaScript on the front-end and works with vanilla JS, jQuery, React, Vue, Angular, and any other modern framework. Drop it into a script tag, an ES module, or a bundled application — Froala adapts to the way you already build.
Can I test the Froala editor before purchasing it?
Absolutely — you can use Froala in development for free, and every feature on this page is available in the trial. A license is only required for production deployments.
