Editor.js — Block-Style Editor with Clean JSON Output

Introduction

Editor.js is an open-source block-style editor that produces structured JSON instead of raw HTML. Each content block (paragraph, heading, image, list) is stored as a typed JSON object, making the output portable and safe to render on any frontend. The plugin architecture allows teams to build custom block types for their specific needs.

What Editor.js Does

• Provides a Notion-like block editing experience in the browser
• Outputs clean, structured JSON instead of HTML markup
• Supports a plugin ecosystem for custom block types (images, embeds, tables, code)
• Offers inline formatting tools (bold, italic, links) within blocks
• Handles drag-and-drop block reordering and nesting

Architecture Overview

Editor.js uses a modular architecture where the core handles block management, selection, and keyboard events, while individual block types are implemented as separate tool plugins. Each tool registers its render and save methods with the core. The editor maintains an internal block model that serializes to a JSON array of typed blocks, each containing its own data payload.

Self-Hosting & Configuration

• Install the core package and desired tool plugins via npm
• Initialize the editor with a holder element and tool configuration
• Configure toolbar appearance and available inline tools
• Set initial data by passing a JSON block array to the constructor
• Register custom tools by implementing the Tool API interface

Key Features

• Clean JSON output that separates content from presentation
• Extensible plugin system with 40+ community block tools
• Read-only mode for rendering saved content without editing
• Autosave support with configurable debounce timing
• Lightweight core under 30 KB gzipped

Comparison with Similar Tools

• TipTap — outputs HTML or JSON via ProseMirror; Editor.js uses a simpler block-only JSON model
• Slate — lower-level framework requiring more custom code; Editor.js is more opinionated and quicker to set up
• Quill — outputs Delta or HTML; Editor.js's block-based JSON is easier to render across platforms
• BlockNote — similar block approach but built on TipTap/ProseMirror; Editor.js has a larger plugin ecosystem

FAQ

Q: Can I render Editor.js output in a mobile app? A: Yes. Since the output is JSON, you can write a renderer for any platform — React Native, Flutter, or server-side templates.

Q: Does Editor.js support collaborative editing? A: Not natively. The core is single-user, but community projects have added collaboration via CRDT layers.

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

Q: Is Editor.js accessible? A: The core provides keyboard navigation between blocks and ARIA attributes. Individual tool plugins should implement their own accessibility features.

Sources

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