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

> Editor.js is an open-source block-style editor that outputs clean JSON instead of HTML markup. It provides a modular plugin architecture for adding custom block types like images, lists, tables, and embeds.

## Install

Save in your project root:

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

## Quick Use
```bash
npm install @editorjs/editorjs
# In your JS:
# import EditorJS from '@editorjs/editorjs';
# const editor = new EditorJS({ holder: 'editorjs' });
```

## Introduction
Editor.js is a block-style rich text editor developed by CodeX Team. Instead of producing raw HTML, it structures content as an array of typed JSON blocks, giving developers full control over how content is stored, rendered, and migrated across platforms.

## What Editor.js Does
- Renders a clean, distraction-free editing interface with inline toolbars
- Outputs structured JSON data where each block has a type and data payload
- Supports plugins for paragraphs, headers, lists, images, code, quotes, and tables
- Provides a read-only mode for displaying saved content without editing capabilities
- Offers an undo/redo system and keyboard shortcuts for efficient editing

## Architecture Overview
Editor.js uses a modular core that manages block lifecycle, selection, and caret position. Each block type is a separate plugin class that registers itself with the core. The editor communicates through a well-defined API, and all data flows through a centralized saver that serializes blocks to JSON on demand.

## Self-Hosting & Configuration
- Install via npm and import as an ES module into any frontend project
- Add block plugins individually (e.g., @editorjs/header, @editorjs/image)
- Configure default blocks, placeholder text, and autofocus behavior via the constructor
- Customize toolbar appearance and block ordering through the tools configuration
- Integrate with any backend by posting the JSON output via your own API

## Key Features
- JSON-first output makes content portable and easy to render on any platform
- Plugin ecosystem with 40+ community-maintained block types
- Lightweight core with no heavy framework dependencies
- Paste handling automatically converts HTML and plain text into structured blocks
- Inline formatting tools for bold, italic, links, and custom markers

## Comparison with Similar Tools
- **Quill** — produces HTML delta format; Editor.js outputs typed JSON blocks
- **TipTap** — ProseMirror-based with schema definitions; Editor.js uses a simpler plugin model
- **Slate** — low-level framework for building editors; Editor.js is ready to use out of the box
- **CKEditor** — feature-rich commercial editor; Editor.js is fully open source and lightweight
- **Draft.js** — React-specific and now archived; Editor.js is framework-agnostic

## FAQ
**Q: What frameworks does Editor.js support?**
A: Editor.js is vanilla JavaScript and works with React, Vue, Angular, Svelte, or plain HTML.

**Q: How do I render saved JSON content?**
A: Parse the JSON blocks array and map each block type to your own rendering component or HTML template.

**Q: Can I create custom block types?**
A: Yes. Implement the BlockTool interface with render(), save(), and optional validate() methods.

**Q: Is Editor.js suitable for production use?**
A: Yes. It is used in production by multiple content platforms and supports collaborative editing via external plugins.

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

---
Source: https://tokrepo.com/en/workflows/asset-8f2458e4
Author: AI Open Source