Open-source project
codex-team/editor.js avatar
codex-team/editor.js

Editor.js: a block editor that stores content as JSON instead of HTML

A block-style editor with clean JSON output

32,001 stars2,246 forksTypeScriptApache-2.0

At a glance

What is it?
Editor.js is a TypeScript block editor whose output is structured JSON, with each content type supplied by a separate tool plugin. The data model is the selling point; the plugin ecosystem is the cost.
Who is it for?
Adopt Editor.js when the stored artefact matters more than the editing surface: headless CMS backends, mobile clients, or pipelines that need to sanitise and re-render content in several places. Do not adopt it if you expect a batteries-included editor, since the core ships no block tools and you must install and register each one yourself.
Can I use it commercially?
Yes. Apache-2.0 is a permissive licence: you can use, modify and sell software built on it, as long as you keep its copyright and licence notices.
Is it still maintained?
Yes. The repository last received commits 13 days ago.
What is it written in?
Mainly TypeScript, according to GitHub's language statistics.

Answers come from the project's GitHub data, last synced on November 13, 2026, and from our analysis. They are not legal advice.

From daily snapshots

Star history

  • codex-team/editor.js32,001 ★ · +63
Star history
Repository2026-09-112026-11-13
codex-team/editor.js31.9k32k

63 Stars in the last 63 days, measured from the daily GitHub snapshot. Compare with other projects

Editorial analysis

The problem is the output format, not the editing experience

Most WYSIWYG editors treat HTML as the storage format. The editor renders markup, you save the markup, and every consumer of that content has to parse it again: a mobile client, a search indexer, a newsletter renderer, an email template. The README states the project's position directly: Editor.js outputs clean JSON data instead of heavy HTML markup, and lists Web, iOS, Android, AMP, Instant Articles, speech readers and AI chatbots as intended consumers. That list is the argument. A block is a typed object with an id, a type, and a data payload, so a renderer for one platform does not need to understand the DOM structure another platform produced. The audience is therefore teams building content platforms rather than teams dropping a rich text field into an admin form. If your only consumer is a browser that will render the same HTML you saved, the JSON detour buys you nothing.

How a block editor is assembled from tools

The core package is deliberately thin. According to the README, each Block is provided via a separate plugin, which the project calls a Tool. The core supplies the editing surface, the block lifecycle, the toolbox and the inline toolbar; the tools supply the actual content types. The README's own tool list is the clearest statement of scope: Heading, Quote, Image, Simple Image, Nested List, Checklist, Link embed, Embeds, Table, Delimiter, Warning, Code, Raw HTML, Attaches, Marker and Inline Code, each in its own repository under the editor-js organisation. That split has a visible consequence. Simple Image is described as working without a backend requirement, which implies the regular Image tool expects one, so the choice between them is really a choice about whether you are prepared to run an upload endpoint. The data flow is one-directional at the boundary: you construct an EditorJS instance with a tools map, the user edits blocks, and you call editor.save(), which the README shows returning a Promise. Nothing about persistence is decided for you.

Installing the core and registering the tools you actually need

The README gives a three-step installation: install Editor.js, install the tools you need, initialise an instance. The package is @editorjs/editorjs, available via NPM, Yarn or a CDN link to jsDelivr, with npm i @editorjs/editorjs as the documented command. Initialisation requires a mount point and a configuration object. The README's example uses a div with id editorjs and then new EditorJS({ tools: { /* ... your tools */ } }), imported as import EditorJS from '@editorjs/editorjs'. Note what the example does not contain: any actual tool. An empty tools map is a valid starting point but a useless editor, so the first real decision is which tools to add and how to key them in that map. Saving is a single call, const data = await editor.save(), and the README points to example/example.html in the repository for a fuller worked example, plus the configuration page on editorjs.io for the option set. Treat the configuration page on the docs site as the source of truth for options beyond tools.

The plugin-per-block model is the main cost

Flexibility here is not free. Every content type is a dependency you install, register, version and eventually upgrade, and the core repository does not ship them. That means a bug in the Table tool is a bug in a different repository with a different release cadence from the core, and the compatibility surface between core and tools is something you have to track yourself. The README's roadmap hints at why this matters: several items under Ecosystem improvements are still unchecked, including Editor.js DevTools, Editor.js Design System, Editor.js Preset Env, a new core bundle system, and new documentation and guides. A Preset Env would presumably reduce exactly the assembly work described above, and it is not done. The second limitation is collaborative editing. The roadmap checks off most of its items (Inline Tools JSON format, Operations Observer, Executor, Manager and Transformer, Undo/Redo Manager, Tools API changes, server and communication), but updating the basic tools to fit the new API is still unchecked, so do not assume collaborative editing is available. If concurrent editing is a requirement, verify it before choosing Editor.js.

What the roadmap says about the project's direction

The roadmap is unusually specific, which makes it useful for judging fit. The Unified Toolbars group is entirely checked: Block Tunes moved left, a vertical Toolbox, multiple Toolbox buttons per Tool, vertical Block Tunes, nested menus, separators, a Conversion Menu, and hints plus the Conversion and Inline toolbars moving onto the unified toolbar. In other words, the editing chrome has recently been reworked and that work is finished. Under Other features, blocks drag'n'drop, new cross-block selection and new cross-block caret moving are all unchecked. The collaborative editing group is mostly checked, with only updating the basic tools to the new API unchecked. Reading the roadmap as a status report rather than a promise is the honest approach: the checked items describe what the current toolbar looks like, and the unchecked items describe what you should not assume exists.

The alternative: HTML-first editors such as Quill or TinyMCE

The obvious comparison is an HTML-first rich text editor. Quill and TinyMCE both hand you a document model rooted in markup or a Delta format and a large built-in feature set; you configure formats and toolbar buttons rather than installing separate packages per content type. The difference in approach is where the structure lives. In an HTML-first editor the structure is expressed in the DOM and you extract it afterwards, often with a sanitiser and a parser. In Editor.js the structure is the stored artefact, and rendering is your problem, which is why the README can claim the output is easy to sanitise and extend. The trade runs the other way for teams that want a working editor in an afternoon: with Quill or TinyMCE you get bold, italic, lists and links without leaving the package, while Editor.js leaves you to install Marker, Inline Code, Nested List and the rest one by one. Editor.js is also not a page builder or a document store. It is the editing surface and the JSON shape, and nothing else.

Maintenance, licensing and what to verify before adopting

The core is Apache-2.0, which permits commercial use and modification and includes an explicit patent grant; that is a permissive licence, and it is not legal advice to say so. The licence of the core does not automatically extend to the tools, which live in separate repositories under the editor-js organisation and may carry their own terms, so check each tool you add. On maintenance cost, the most recent releases are release candidates, v2.32.0-rc.3 on 2026-11-01, v2.32.0-rc.2 on 2026-10-28 and v2.32.0-rc.1 on 2026-10-26, and the default branch is next rather than main, so the development line and the released line are not the same branch. The README also asks for donations through Open Collective, Patreon and crypto, and states plainly that if your business relies on Editor.js you will probably want it maintained. Treat that as a funding signal rather than a stability guarantee. Practical verification steps: confirm that a tool exists for every block type you need, check that the JSON shape editor.save() returns matches what your storage layer accepts, and decide early whether you are rendering that JSON server-side or client-side, because that renderer is code you own.

Editorial conclusion

Adopt Editor.js when the stored artefact matters more than the editing surface: headless CMS backends, mobile clients, or pipelines that need to sanitise and re-render content in several places. Do not adopt it if you expect a batteries-included editor, since the core ships no block tools and you must install and register each one yourself. Before committing, check whether the specific tools you need exist and are maintained, confirm the JSON schema your storage layer will accept, and note that collaborative editing is still an unchecked roadmap item rather than a shipped feature. The Apache-2.0 licence covers the core; individual tools are separate repositories with their own licences, so verify each one you install.

Frequently asked questions

What is Editor.js?

A block-style WYSIWYG editor whose saved output is JSON rather than HTML markup. Each block is provided by a separate plugin, so the core ships without content types of its own and the JSON payload is what your backend stores.

How do you install Editor.js?

Through NPM, Yarn or a CDN, with one command given: npm i @editorjs/editorjs. Installing the tools you want is a separate step, since each block type lives in its own package.

How do you use Editor.js once it is installed?

Declare a container div, construct EditorJS with a tools object naming your blocks, and keep the reference. Calling editor.save() returns a Promise that resolves to the saved data.

How do you use Editor.js in React?

The repository ships plain HTML examples under example/, including example.html, example-i18n.html, example-multiple.html, example-popup.html and example-rtl.html. No React wrapper or React example appears in the repository root, so the integration is built on the tools object in your own component code.

Is Editor.js free?

Yes. The package is licensed Apache-2.0 and the README lists the project as free and open source. It takes donations through OpenCollective, crypto and Patreon, and the README invites readers to hire CodeX experts for consultation and feature work.

Where are the Editor.js examples?

Under example/: example.html plus i18n, multiple, popup and RTL variants. The README points at example/example.html for more detailed usage, and a development server is available through the vite based dev script.

Official sources

  1. codex-team/editor.js on GitHub
  2. License: Apache-2.0
  3. Project website
  4. README
  5. Releases
Add this badge to your README

If you maintain this project, the badge below links readers to this analysis and shows its maintenance status from the daily GitHub snapshot. Paste the markdown into your README; add ?metric=license or ?metric=stars to the image URL for a different field.

Add this badge to your README

markdown
[![Hysen Labs](https://hysenlabs.com/badge/codex-team-editor-js.svg)](https://hysenlabs.com/projects/codex-team-editor-js)

Star history chart for your README

markdown
[![Star history](https://hysenlabs.com/chart/codex-team-editor-js.svg)](https://hysenlabs.com/projects/codex-team-editor-js)

Was this useful?