Editor.js — Block-Style Rich Text Editor for the Modern Web

Introduction

Editor.js takes a fundamentally different approach to rich text editing. Instead of producing raw HTML, it treats content as a series of typed blocks — paragraphs, headings, images, code snippets — each stored as structured JSON. This makes content safe to sanitize, simple to validate, and trivial to render on any frontend or mobile app.

What Editor.js Does

• Provides a block-based editing experience similar to Notion or Medium
• Outputs clean JSON data instead of messy HTML markup
• Supports a plugin architecture where each block type is a separate tool
• Ships with official plugins for headers, lists, images, quotes, code, and more
• Allows inline formatting like bold, italic, links, and custom markers

Architecture Overview

Editor.js core manages a list of Block instances, each backed by a Tool class that controls rendering and data serialization. The core handles block ordering, focus management, keyboard navigation, and the toolbar UI. Tools are loaded as plugins and registered at initialization. When the user saves, each block serializes itself into a typed JSON object, producing an array of blocks with type, data, and optional tunes.

Self-Hosting & Configuration

• Install the core and desired tool plugins via npm
• Pass a tools configuration object mapping tool names to their classes
• Use data option to pre-populate the editor with existing JSON content
• Configure onChange callback for autosave workflows
• Style the editor container with CSS; Editor.js uses minimal default styling

Key Features

• Clean structured JSON output that is safe to store and render anywhere
• Each block type is an independent plugin, keeping the core lightweight
• Built-in drag-and-drop block reordering
• Inline toolbar with extensible formatting options
• Read-only mode for previewing content without editing

Comparison with Similar Tools

• Quill — produces HTML delta format; Editor.js outputs block-level JSON
• Slate — lower-level framework for building custom editors; Editor.js is ready to use
• TipTap — ProseMirror-based with schema-driven documents; Editor.js uses a simpler block model
• Draft.js — Meta's immutable editor state; Editor.js has a lighter API surface
• CKEditor 5 — full-featured enterprise editor; Editor.js is more minimal and modular

FAQ

Q: How do I render Editor.js JSON on the frontend? A: Parse the JSON block array and render each block by type. Libraries like editorjs-html or editorjs-renderer convert blocks to HTML or React components.

Q: Can I create custom block types? A: Yes. Implement the Tool API interface with render(), save(), and optional validate() methods, then register it in the tools config.

Q: Does Editor.js support collaborative editing? A: Not natively, but the block-based JSON model integrates with CRDT or OT libraries. Community projects add real-time collaboration on top.

Q: Is Editor.js suitable for production CMS use? A: Yes. Many CMS platforms and content APIs use Editor.js as their primary editor because the JSON output is easier to validate and transform than raw HTML.

Sources

• https://github.com/codex-team/editor.js
• https://editorjs.io
• https://editorjs.io/base-concepts