---
title: Migrate from CKEditor 5 to Jodit
description: CKEditor 5 to Jodit migration with before/after code: ClassicEditor.create vs Jodit.make, getData, change events, toolbar, custom buttons, plugins, uploads, a plugin map and themes.
keywords: ckeditor to jodit, migrate from ckeditor 5, ckeditor alternative, replace ckeditor, ckeditor plugin equivalent, ckeditor gpl migration
---

# Migrate from CKEditor 5 to Jodit

CKEditor 5 stores a model and converts it to HTML; Jodit edits the HTML directly. Your saved content is HTML in both cases, so it loads as is. The work is in the configuration, the toolbar names and the plugin API, which is much shorter in Jodit.

```tldr
Content: `editor.getData()` HTML loads into Jodit without conversion
Init: `ClassicEditor.create(element, config)` becomes `Jodit.make(selector, options)`
Plugins: no imports to assemble, every core plugin ships in the build
Buttons: `ui.componentFactory.add` plus `ButtonView` becomes one control object
License: MIT core, no `licenseKey`
Compare: [Jodit vs CKEditor 5](/jodit/vs/ckeditor/) for prices and features
```

## 1. Install

````beforeafter
### CKEditor 5

```bash
npm install ckeditor5 @ckeditor/ckeditor5-react
```

### Jodit

```bash
npm uninstall ckeditor5 @ckeditor/ckeditor5-react
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
### CKEditor 5

```js
import {
	ClassicEditor, Essentials, Paragraph, Bold, Italic,
	Link, List, Image, ImageUpload, Table, TableToolbar
} from 'ckeditor5';
import 'ckeditor5/ckeditor5.css';

const editor = await ClassicEditor.create(document.querySelector('#editor'), {
	licenseKey: 'GPL',
	plugins: [Essentials, Paragraph, Bold, Italic, Link, List, Image, ImageUpload, Table, TableToolbar],
	toolbar: ['undo', 'redo', '|', 'bold', 'italic', '|', 'link', 'uploadImage', 'insertTable', '|', 'bulletedList', 'numberedList'],
	placeholder: 'Start typing'
});
```

### Jodit

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

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

There is no plugin list to assemble: bold, lists, tables, images and the rest are in the core build. If you want a smaller bundle, the [Builder](/jodit/builder/) produces one with only the plugins you tick. `Jodit.make` is synchronous.

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

````beforeafter
### CKEditor 5

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

editor.model.document.on('change:data', () => {
	save(editor.getData());
});

editor.editing.view.document.on('blur', () => validate());

editor.enableReadOnlyMode('app');
await editor.destroy();
```

### Jodit

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

editor.events.on('change', newValue => save(newValue));

editor.events.on('blur', () => validate());

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

Jodit has no separate model: `editor.value` is the HTML, and `change` passes the new HTML to the handler. Markup that the CKEditor schema would strip (inline styles, custom attributes, arbitrary tags) is kept; use the `clean-html` plugin options if you want to filter it.

## 4. Toolbar

````beforeafter
### CKEditor 5

```js
toolbar: {
	items: [
		'undo', 'redo', '|',
		'heading', 'fontFamily', 'fontSize', '|',
		'bold', 'italic', 'underline', 'strikethrough', '|',
		'fontColor', 'fontBackgroundColor', '|',
		'alignment', '|',
		'bulletedList', 'numberedList', 'outdent', 'indent', '|',
		'link', 'uploadImage', 'mediaEmbed', 'insertTable', '|',
		'sourceEditing'
	],
	shouldNotGroupWhenFull: true
}
```

### Jodit

```js
buttons: [
	'undo', 'redo', '|',
	'paragraph', 'font', 'fontsize', '|',
	'bold', 'italic', 'underline', 'strikethrough', '|',
	'brush', '|',
	'align', '|',
	'ul', 'ol', 'outdent', 'indent', '|',
	'link', 'image', 'video', 'table', '|',
	'source'
],
toolbarAdaptive: false
```
````

Jodit chooses a button list by editor width (`buttons`, `buttonsMD`, `buttonsSM`, `buttonsXS`); `toolbarAdaptive: false` keeps one list. `removeButtons` and `extraButtons` tweak the defaults without listing everything.

| CKEditor 5                         | Jodit                                         |
| ---------------------------------- | --------------------------------------------- |
| `heading`                          | `paragraph`                                   |
| `fontFamily`, `fontSize`           | `font`, `fontsize`                            |
| `fontColor`, `fontBackgroundColor` | `brush`                                       |
| `alignment`                        | `align`                                       |
| `bulletedList`, `numberedList`     | `ul`, `ol`                                    |
| `uploadImage`, `insertImage`       | `image`                                       |
| `mediaEmbed`                       | `video`                                       |
| `insertTable`                      | `table`                                       |
| `sourceEditing`                    | `source`                                      |
| `removeFormat`                     | `eraser`                                      |
| `findAndReplace`                   | `find`                                        |
| `specialCharacters`                | `symbols`                                     |
| `horizontalLine`                   | `hr`                                          |
| `blockQuote`                       | `paragraph` dropdown or `formatBlock` command |
| `codeBlock`                        | `paste-code` (PRO)                            |

## 5. A custom button

````beforeafter
### CKEditor 5

```js
import { Plugin, ButtonView } from 'ckeditor5';

class InsertDate extends Plugin {
	init() {
		const editor = this.editor;

		editor.ui.componentFactory.add('insertDate', locale => {
			const view = new ButtonView(locale);
			view.set({ label: 'Date', tooltip: 'Insert current date', withText: true });

			view.on('execute', () => {
				editor.model.change(writer => {
					editor.model.insertContent(writer.createText(new Date().toDateString()));
				});
			});

			return view;
		});
	}
}

ClassicEditor.create(el, { plugins: [Essentials, InsertDate], toolbar: ['insertDate'] });
```

### Jodit

```js
Jodit.make('#editor', {
	buttons: [
		'bold', 'italic', '|',
		{
			name: 'insertDate',
			text: 'Date',
			tooltip: 'Insert current date',
			exec(editor) {
				editor.s.insertHTML(new Date().toDateString());
			}
		}
	]
});
```
````

No plugin class, no view, no model writer: a control is an object with `exec`. Register it once in `Jodit.defaultOptions.controls` to reuse it by name, add `list` for a dropdown or `isActive` for a toggle. Full guide: [add a custom button](/jodit/pro/docs/how-to/add-custom-button.md).

## 6. Writing a plugin

````beforeafter
### CKEditor 5

```js
import { Plugin } from 'ckeditor5';

class WordCounter extends Plugin {
	init() {
		const editor = this.editor;
		const el = document.createElement('div');

		editor.ui.on('ready', () => {
			editor.ui.view.element.append(el);
		});

		editor.model.document.on('change:data', () => {
			const words = editor.getData().replace(/<[^>]+>/g, ' ').trim().split(/\s+/).length;
			el.textContent = `${words} words`;
		});
	}
}

ClassicEditor.create(el, { plugins: [Essentials, WordCounter] });
```

### 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 plain functions or classes with `init` and `destruct`. They receive the editor, work with DOM nodes directly and are active in every editor unless listed in `disablePlugins`. There is no schema to extend when you insert custom markup. See [how to create a plugin](/jodit/pro/docs/how-to/create-plugin.md).

## 7. Image upload

````beforeafter
### CKEditor 5

```js
ClassicEditor.create(el, {
	plugins: [Essentials, Image, ImageUpload, SimpleUploadAdapter],
	simpleUpload: {
		uploadUrl: '/upload',
		withCredentials: true,
		headers: { Authorization: 'Bearer ...' }
	}
});
```

### Jodit

```js
Jodit.make('#editor', {
	uploader: {
		url: '/upload',
		withCredentials: true,
		headers: { Authorization: 'Bearer ...' }
	}
});
```
````

SimpleUploadAdapter expects `{ "url": "/path.jpg" }`; the Jodit uploader expects `{ "success": true, "data": { "baseurl": "/files/", "files": ["path.jpg"] } }`. Adapt the response with `uploader.process`, or use a connector ([Node.js](/jodit/examples/integration/jodit-nodejs.html), [Python](/jodit/examples/integration/jodit-python.html), PHP) and get the file browser with it. CKBox has no direct equivalent in the core; the PRO Finder is the self-hosted counterpart.

## 8. Plugin map

| CKEditor 5                                                       | Jodit                                                | Where                   |
| ---------------------------------------------------------------- | ---------------------------------------------------- | ----------------------- |
| Essentials (undo, typing, enter)                                 | `redo-undo`, `enter`, `backspace`                    | core                    |
| Bold, Italic, Underline, Strikethrough                           | `bold`                                               | core                    |
| Heading                                                          | `paragraph`, `format-block`                          | core                    |
| Font, FontColor, Highlight                                       | `font`, `size`, `color`                              | core                    |
| Alignment, Indent                                                | `justify`, `indent`                                  | core                    |
| List, TodoList                                                   | `ordered-list` / `todo-list` (PRO)                   | core / PRO              |
| Link, AutoLink                                                   | `link`                                               | core                    |
| Image, ImageUpload, ImageResize                                  | `image`, `image-properties`, `resizer`, image editor | core                    |
| MediaEmbed                                                       | `video`, `media`                                     | core                    |
| Table, TableToolbar                                              | `table`, `select-cells`, `resize-cells`              | core                    |
| SourceEditing                                                    | `source`                                             | core                    |
| CodeBlock                                                        | `paste-code`                                         | PRO                     |
| PasteFromOffice                                                  | `paste-from-word`                                    | core, enhanced in PRO   |
| FindAndReplace                                                   | `search`                                             | core                    |
| WordCount                                                        | `stat`, `limit`                                      | core                    |
| SpecialCharacters                                                | `symbols`                                            | core                    |
| RemoveFormat                                                     | `clean-html`                                         | core                    |
| Autosave                                                         | `backup`                                             | PRO                     |
| Mention                                                          | `autocomplete`                                       | PRO                     |
| Emoji                                                            | `emoji`                                              | PRO                     |
| Template                                                         | `templates`                                          | PRO                     |
| CaseChange                                                       | `change-case`                                        | PRO                     |
| ExportPdf, ExportWord, ImportWord                                | `export-docs`                                        | PRO                     |
| CKBox, CKFinder                                                  | `finder`                                             | PRO                     |
| CKEditor AI                                                      | `ai-assistant`                                       | core, PRO adds adapters |
| ShowBlocks                                                       | `show-blocks`                                        | PRO                     |
| Real-time collaboration, Comments, TrackChanges, RevisionHistory | [Jodit Collaboration](/jodit/pro/collaboration/)     | separate product        |
| Pagination, DocumentOutline                                      | no equivalent                                        |                         |

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

## 9. Themes

````beforeafter
### CKEditor 5

```css
:root {
	--ck-color-base-background: #1e1e2e;
	--ck-color-base-text: #cdd6f4;
	--ck-color-toolbar-background: #181825;
	/* ...dozens more */
}
```

### 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/catppuccin/catppuccin.all.min.css" />
<script>Jodit.make('#editor', { theme: 'catppuccin' });</script>
```
````

Jodit also exposes CSS variables for fine-tuning. See [UI themes](/jodit/examples/theme/ui-themes.html) and [dark theme](/jodit/examples/theme/dark.html).

## 10. Option names you will look for

| CKEditor 5                               | Jodit                                                    |
| ---------------------------------------- | -------------------------------------------------------- |
| `placeholder`                            | `placeholder`                                            |
| `language`                               | `language`                                               |
| `ui.viewportOffset.top`                  | `toolbarStickyOffset`                                    |
| `editor.enableReadOnlyMode()`            | `readonly: true` or `editor.setReadOnly(true)`           |
| `htmlSupport.allow`                      | `cleanHTML.allowTags`                                    |
| `typing.transformations`                 | not needed, plain `contenteditable` typing               |
| InlineEditor, BalloonEditor              | `inline: true` with the inline popup                     |
| DecoupledEditor                          | `toolbar: '#my-toolbar'` to render the toolbar elsewhere |
| `editor.ui.view.editable` height via CSS | `height`, `minHeight`, `maxHeight`                       |

## Checklist

```steps
### Swap the init call
Replace `ClassicEditor.create` and the plugin array with one `Jodit.make(selector, options)`.

### Wire content and events
`getData`/`setData` become `editor.value`; `change:data` becomes `events.on('change')`.

### Port custom buttons and plugins
A `Plugin` subclass with a `ButtonView` becomes a control object; model writers become `editor.s.insertHTML` and DOM calls.

### 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) and compare the HTML; Jodit keeps markup the CKEditor schema dropped.
```

## Links

```cards
- [Jodit vs CKEditor 5](/jodit/vs/ckeditor/): 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 @ckeditor/ckeditor5-react.
```