For Developers
The editor developers actually want to build with
A clean, well-documented API, zero-bloat HTML output, and first-class support for every framework you're already using. From npm install to production in minutes.
// npm install froala-editor import FroalaEditor from 'froala-editor' new FroalaEditor('#editor', { toolbarButtons: [ 'bold', 'italic', 'insertImage' ], imageUploadURL: '/api/upload', events: { contentChanged: function() { const html = this.html.get() save(html) // clean HTML, always } } })
100K+
Developers
36+
Plugins
100+
Config Options
15+
Frameworks
10+
Years in Production
100K+
Developers
36+
Plugins
100+
Config Options
15+
Frameworks
10+
Years in Production
Everything you need. Nothing you don't.
A full-featured editor with a predictable API — so you spend time building your product, not fighting your editor.
Clean HTML Output
No vendor markup, no garbage tags. Froala outputs semantic, well-formed HTML every time — exactly what you store, exactly what you render.
100+ Configuration Options
Fine-grained control over toolbar, behavior, and output. Every option is documented and every edge case is accounted for.
Custom Plugins & Toolbar
Add your own toolbar buttons, dropdowns, or popups using the plugin API. Extend without forking.
Rich Events & Methods
Hook into editor lifecycle events, manipulate content programmatically, or build read-only display modes — all with documented APIs.
Every Framework, Officially
React, Angular, Vue, vanilla JS, Django, Rails, WordPress — official integrations for all of them, maintained and up to date.
XSS Protection Built In
Froala sanitizes HTML input and output by default, blocking script injection and malicious markup without extra configuration.
Works with your stack, out of the box
Official, maintained wrappers for every major framework — no hacks, no workarounds. Import and initialize.
- npm packages for React, Angular, Vue.js, and vanilla JS
- Server-side integrations for Django, Rails, Symfony, Laravel
- CDN builds if you prefer no build step
- TypeScript definitions included
React Angular Vue
import FroalaEditor from 'react-froala-wysiwyg' export default function MyEditor() { const [html, setHtml] = useState('') return ( <FroalaEditor model={html} onModelChange={setHtml} config={{ placeholderText: 'Start writing...' }} /> ) }
// app.module.ts import { FroalaEditorModule } from 'angular-froala-wysiwyg' @NgModule({ imports: [FroalaEditorModule.forRoot()] }) export class AppModule {} <!-- template --> <div [froalaEditor]="options" [(froalaModel)]="content" ></div>
// main.js import VueFroala from 'vue-froala-wysiwyg' app.use(VueFroala) <!-- MyEditor.vue --> <froala-editor v-model="content" :config="{ placeholderText: 'Start writing...' }" />
Start building in under 5 minutes
npm install froala-editor and you’re good to go. Free plan available, no credit card required.
