---
title: Migrate from Froala to Jodit
description: Froala Editor to Jodit migration with before/after code: new FroalaEditor vs Jodit.make, html.get and set, events, toolbarButtons, RegisterCommand buttons, PLUGINS, uploads, a plugin map and themes.
keywords: froala to jodit, migrate from froala, froala alternative, replace froala editor, froala plugin equivalent, froala license migration
---

# Migrate from Froala to Jodit

Froala and Jodit are close cousins: both edit HTML in place, both configure everything from one options object and both have a flat toolbar array. Most of the migration is renaming options and buttons; the plugin API is the one part that differs in shape.

```tldr
Content: HTML in both editors, Froala's `fr-*` classes are plain CSS classes
Init: `new FroalaEditor(selector, options)` becomes `Jodit.make(selector, options)`
Toolbar: `toolbarButtons` becomes `buttons`, most names change
Buttons: `RegisterCommand` becomes a control object
License: MIT core, no activation key, no trial watermark
Compare: [Jodit vs Froala](/jodit/vs/froala/) for prices and features
```

## 1. Install

````beforeafter
### Froala

```bash
npm install froala-editor react-froala-wysiwyg
```

### Jodit

```bash
npm uninstall froala-editor react-froala-wysiwyg
npm install jodit
# React projects: npm install jodit-react
# PRO: npm install jodit-pro jodit-pro-react
```
````

Jodit is one package with no peer dependencies; the React, Angular and Vue wrappers are optional. Without a bundler, two tags replace the whole setup:

```html
<link
	rel="stylesheet"
	href="https://cdnjs.cloudflare.com/ajax/libs/jodit/4.2.27/jodit.min.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jodit/4.2.27/jodit.min.js"></script>
```

## 2. Initialise

````beforeafter
### Froala

```js
import FroalaEditor from 'froala-editor';
import 'froala-editor/css/froala_editor.pkgd.min.css';
import 'froala-editor/js/plugins.pkgd.min.js';

const editor = new FroalaEditor('#editor', {
	key: 'XXXX-XXXX-XXXX',
	toolbarButtons: ['undo', 'redo', '|', 'bold', 'italic', '|', 'formatUL', 'formatOL', '|', 'insertLink', 'insertImage', 'insertTable'],
	heightMin: 300,
	placeholderText: 'Start typing',
	attribution: false
});
```

### Jodit

```js
import { Jodit } from 'jodit';
import 'jodit/es2021/jodit.min.css';

const editor = Jodit.make('#editor', {
	buttons: ['undo', 'redo', '|', 'bold', 'italic', '|', 'ul', 'ol', '|', 'link', 'image', 'table'],
	minHeight: 300,
	placeholder: 'Start typing',
	disablePlugins: ['powered-by-jodit']
});
```
````

No key: the Jodit core is MIT. A PRO key is a `license` option and only matters when you use the PRO plugins.

## 3. Read and write content, listen to changes

````beforeafter
### Froala

```js
const html = editor.html.get();
editor.html.set('<p>Hello</p>');

new FroalaEditor('#editor', {
	events: {
		contentChanged() { save(this.html.get()); },
		blur() { validate(); },
		initialized() { console.log('ready'); }
	}
});

editor.edit.off();
editor.destroy();
```

### Jodit

```js
const html = editor.value;
editor.value = '<p>Hello</p>';

const editor = Jodit.make('#editor', {
	events: {
		change(newValue) { save(newValue); },
		blur() { validate(); },
		afterInit() { console.log('ready'); }
	}
});

editor.setReadOnly(true);
editor.destruct();
```
````

Both editors accept an `events` object in the options, and both expose `events.on` on the instance. In Jodit the handler receives the editor as `this` as well, and `change` passes the new HTML as the first argument.

## 4. Toolbar

````beforeafter
### Froala

```js
toolbarButtons: [
	'undo', 'redo', '|',
	'paragraphFormat', 'fontFamily', 'fontSize', '|',
	'bold', 'italic', 'underline', 'strikeThrough', '|',
	'textColor', 'backgroundColor', '|',
	'alignLeft', 'alignCenter', 'alignRight', '|',
	'formatUL', 'formatOL', 'outdent', 'indent', '|',
	'insertLink', 'insertImage', 'insertVideo', 'insertTable', '|',
	'html', 'fullscreen'
],
toolbarSticky: true
```

### Jodit

```js
buttons: [
	'undo', 'redo', '|',
	'paragraph', 'font', 'fontsize', '|',
	'bold', 'italic', 'underline', 'strikethrough', '|',
	'brush', '|',
	'left', 'center', 'right', '|',
	'ul', 'ol', 'outdent', 'indent', '|',
	'link', 'image', 'video', 'table', '|',
	'source', 'fullsize'
],
toolbarSticky: true
```
````

Froala has `toolbarButtonsMD`, `toolbarButtonsSM` and `toolbarButtonsXS`; Jodit has the same idea in `buttonsMD`, `buttonsSM` and `buttonsXS`. `toolbarInline: true` becomes `inline: true`, and `toolbarContainer` becomes `toolbar: '#my-toolbar'`.

| Froala                                                    | Jodit                                             |
| --------------------------------------------------------- | ------------------------------------------------- |
| `paragraphFormat`                                         | `paragraph`                                       |
| `fontFamily`, `fontSize`                                  | `font`, `fontsize`                                |
| `textColor`, `backgroundColor`                            | `brush`                                           |
| `alignLeft`, `alignCenter`, `alignRight`, `alignJustify`  | `left`, `center`, `right`, `justify` (or `align`) |
| `formatUL`, `formatOL`                                    | `ul`, `ol`                                        |
| `insertLink`, `insertImage`, `insertVideo`, `insertTable` | `link`, `image`, `video`, `table`                 |
| `insertFile`                                              | `file`                                            |
| `html`                                                    | `source`                                          |
| `fullscreen`                                              | `fullsize`                                        |
| `clearFormatting`                                         | `eraser`                                          |
| `specialCharacters`                                       | `symbols`                                         |
| `insertHR`                                                | `hr`                                              |
| `lineHeight`                                              | `lineHeight`                                      |
| `selectAll`                                               | `selectall`                                       |
| `print`                                                   | `print`                                           |
| `emoticons`                                               | `emoji` (PRO)                                     |
| `getPDF`                                                  | `export-docs` (PRO)                               |

## 5. A custom button

````beforeafter
### Froala

```js
FroalaEditor.DefineIcon('insertDate', { NAME: 'calendar', SVG_KEY: 'calendar' });

FroalaEditor.RegisterCommand('insertDate', {
	title: 'Insert current date',
	icon: 'insertDate',
	undo: true,
	focus: true,
	callback() {
		this.html.insert(new Date().toDateString());
	}
});

new FroalaEditor('#editor', {
	toolbarButtons: ['bold', 'italic', '|', 'insertDate']
});
```

### Jodit

```js
Jodit.defaultOptions.controls.insertDate = {
	tooltip: 'Insert current date',
	text: 'Date',
	exec(editor) {
		editor.s.insertHTML(new Date().toDateString());
	}
};

Jodit.make('#editor', {
	buttons: ['bold', 'italic', '|', 'insertDate']
});
```
````

Undo is recorded automatically. Icons are an SVG string in `icon` or a name from the [icon set](/jodit/docs/modules/icons.html); dropdowns use `list`, toggles use `isActive`. Full guide: [add a custom button](/jodit/pro/docs/how-to/add-custom-button.md).

## 6. Writing a plugin

````beforeafter
### Froala

```js
FroalaEditor.PLUGINS.wordCounter = function (editor) {
	let el;

	function _init() {
		el = document.createElement('div');
		editor.$wp[0].append(el);

		editor.events.on('contentChanged', () => {
			const words = editor.$el.text().trim().split(/\s+/).length;
			el.textContent = `${words} words`;
		});
	}

	return { _init };
};

new FroalaEditor('#editor', {
	pluginsEnabled: ['wordCounter', 'link', 'image']
});
```

### Jodit

```js
Jodit.plugins.add('wordCounter', editor => {
	const el = document.createElement('div');

	editor.events
		.on('afterInit', () => editor.container.append(el))
		.on('change', () => {
			const words = editor.editor.textContent.trim().split(/\s+/).length;
			el.textContent = `${words} words`;
		});
});

Jodit.make('#editor');
```
````

Jodit plugins are enabled by default once added; `disablePlugins` switches any of them off per editor, the opposite of Froala's `pluginsEnabled` allow-list. There is no jQuery wrapper: `editor.editor` is the editable element and `editor.container` the outer box. See [how to create a plugin](/jodit/pro/docs/how-to/create-plugin.md).

## 7. Image upload

````beforeafter
### Froala

```js
new FroalaEditor('#editor', {
	imageUploadURL: '/upload',
	imageUploadParams: { folder: 'posts' },
	imageUploadMethod: 'POST',
	requestWithCredentials: true
});
```

### Jodit

```js
Jodit.make('#editor', {
	uploader: {
		url: '/upload',
		data: { folder: 'posts' },
		method: 'POST',
		withCredentials: true
	}
});
```
````

Froala expects `{ "link": "/path.jpg" }` back; Jodit expects `{ "success": true, "data": { "baseurl": "/files/", "files": ["path.jpg"] } }`. Adapt the response in `uploader.process`, or run a connector ([Node.js](/jodit/examples/integration/jodit-nodejs.html), [Python](/jodit/examples/integration/jodit-python.html), PHP). Froala's image manager and Filestack correspond to the PRO Finder, which uses the same connectors.

## 8. Plugin map

| Froala plugin                                | Jodit                                                | Where                   |
| -------------------------------------------- | ---------------------------------------------------- | ----------------------- |
| `align`                                      | `justify`                                            | core                    |
| `charCounter`                                | `stat`, `limit`                                      | core                    |
| `codeView`                                   | `source`                                             | core                    |
| `codeBeautifier`                             | `source` (formats on demand)                         | core                    |
| `colors`                                     | `color`                                              | core                    |
| `draggable`                                  | `drag-and-drop`                                      | core                    |
| `emoticons`                                  | `emoji`                                              | PRO                     |
| `file`                                       | `file`                                               | core                    |
| `fontFamily`, `fontSize`                     | `font`                                               | core                    |
| `fullscreen`                                 | `fullsize`                                           | core                    |
| `image`, `imageManager`                      | `image`, `image-properties`, image editor / `finder` | core / PRO              |
| `inlineClass`, `inlineStyle`                 | `class-span`                                         | core                    |
| `lineBreaker`, `quickInsert`                 | `add-new-line`, `inline-popup`                       | core                    |
| `lineHeight`                                 | `line-height`                                        | core                    |
| `link`, `url`                                | `link`                                               | core                    |
| `lists`                                      | `ordered-list`                                       | core                    |
| `paragraphFormat`, `paragraphStyle`, `quote` | `format-block`, `class-span`                         | core                    |
| `print`                                      | `print`                                              | core                    |
| `specialCharacters`                          | `symbols`                                            | core                    |
| `spellChecker`                               | `spellcheck`                                         | core                    |
| `table`                                      | `table`, `select-cells`, `resize-cells`              | core                    |
| `video`, `embedly`                           | `video`, `media`                                     | core                    |
| `wordPaste`                                  | `paste-from-word`                                    | core, enhanced in PRO   |
| `save`                                       | `change` event plus `fetch`                          | core                    |
| `filesManager`                               | `finder`                                             | PRO                     |
| `trackChanges`                               | [Jodit Collaboration](/jodit/pro/collaboration/)     | separate product        |
| AI Assist                                    | `ai-assistant`                                       | core, PRO adds adapters |
| `markdown`, `help`                           | no equivalent                                        |                         |

The complete lists: [core plugins](/jodit/docs/modules/plugins.html) and [PRO plugins](/jodit/pro/docs/).

## 9. Themes

````beforeafter
### Froala

```html
<link rel="stylesheet" href="froala-editor/css/themes/dark.min.css" />
<script>
	new FroalaEditor('#editor', { theme: 'dark' });
</script>
```

### Jodit

```js
Jodit.make('#editor', { theme: 'dark' });
```

```html
<!-- or one of ten community themes -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jodit-ui-themes@1/themes/dracula/dracula.all.min.css" />
<script>Jodit.make('#editor', { theme: 'dracula' });</script>
```
````

The built-in dark theme needs no extra stylesheet. See [UI themes](/jodit/examples/theme/ui-themes.html) and [dark theme](/jodit/examples/theme/dark.html).

## 10. Option names you will look for

| Froala                                 | Jodit                                      |
| -------------------------------------- | ------------------------------------------ |
| `heightMin`, `heightMax`, `height`     | `minHeight`, `maxHeight`, `height`         |
| `placeholderText`                      | `placeholder`                              |
| `language`                             | `language`                                 |
| `toolbarSticky`, `toolbarStickyOffset` | `toolbarSticky`, `toolbarStickyOffset`     |
| `toolbarInline`                        | `inline`                                   |
| `toolbarContainer`                     | `toolbar: '#selector'`                     |
| `charCounterMax`                       | `limitChars`                               |
| `pastePlain`                           | `defaultActionOnPaste: 'insert_only_text'` |
| `iframe: true`, `iframeStyle`          | `iframe: true`, `iframeStyle`              |
| `attribution: false`                   | `disablePlugins: ['powered-by-jodit']`     |
| `editor.edit.off()`                    | `editor.setReadOnly(true)`                 |
| `htmlAllowedTags`                      | `cleanHTML.allowTags`                      |
| `enter: FroalaEditor.ENTER_DIV`        | `enter: 'div'`                             |

## Checklist

```steps
### Swap the constructor
`new FroalaEditor(selector, options)` becomes `Jodit.make(selector, options)`; drop `key`.

### Rename the buttons
Move `toolbarButtons` to `buttons` with the table above; sizes map to `buttonsMD/SM/XS`.

### Port commands and plugins
`RegisterCommand` becomes a control in `Jodit.defaultOptions.controls`; `FroalaEditor.PLUGINS` becomes `Jodit.plugins.add`.

### Point the uploader at your endpoint
Keep the server, adapt the JSON response or add a connector.

### Check the output
Load your three most complex documents into the [playground](/jodit/play.html); strip `fr-*` classes with `cleanHTML` if you no longer need them.
```

## Links

```cards
- [Jodit vs Froala](/jodit/vs/froala/): License, pricing and feature comparison.
- [Options reference](/jodit/docs/options.html): Every Jodit option with defaults.
- [Builder](/jodit/builder/): Pick plugins and buttons and get the config and a smaller bundle.
- [React](/jodit/integrations/react/): jodit-react replaces react-froala-wysiwyg.
```