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

> Editor.js is a block-based rich text editor that outputs clean JSON instead of HTML, making content portable and easy to render on any platform.

## Install

Save as a script file and run:

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

## Quick Use
```bash
npm install @editorjs/editorjs @editorjs/header @editorjs/list
```
```js
import EditorJS from '@editorjs/editorjs';
import Header from '@editorjs/header';
import List from '@editorjs/list';

const editor = new EditorJS({
  holder: 'editorjs',
  tools: { header: Header, list: List }
});
// editor.save().then(data => console.log(data));
```

## 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

---
Source: https://tokrepo.com/en/workflows/7a884a3c-44b2-11f1-9bc6-00163e2b0d79
Author: Script Depot