Scribe vs Editor.js
Scribe and Editor.js solve different problems. Scribe is a classic inline WYSIWYG that outputs clean HTML — perfect for any web content field. Editor.js is a block-oriented CMS editor that outputs portable JSON. Understanding the trade-off is key to choosing the right tool.
Different tools for different content models
Editor.js stores content as structured JSON blocks — great for headless CMS platforms that render to multiple targets (web, mobile, PDF). Scribe stores content as clean HTML — great for any web application that needs formatted text stored directly in a database column and rendered in a browser.
- Scribe:
editor.getHTML()→ store in DB → render directly - Editor.js:
await editor.save()→ JSON → custom renderer required - Scribe has a floating inline toolbar; Editor.js uses per-block inline tools
Feature Comparison
| Feature | Scribe | Editor.js |
|---|---|---|
| Bundle size (gzipped) | < 50KB | ~50KB+ (core) |
| Runtime dependencies | Zero | Zero |
| Output format | HTML | JSON blocks |
| Inline WYSIWYG editing | ||
| Floating toolbar | ||
| Iframe editing | ||
| Direct API (bold()) | ||
| Block-based structure | ||
| Built-in sanitization | ||
| TypeScript | ||
| Plugin system | ||
| Framework agnostic | ||
| Word / Docs paste | Partial | |
| Open source (MIT) |
Code Comparison
ScribeHTML output
import { Scribe } from 'scribejs-editor';
// Classic WYSIWYG — outputs clean HTML
const editor = Scribe.init('#editor');
editor.bold();
editor.heading(2);
editor.link('https://example.com');
// Get HTML directly
const html = editor.getHTML();
// => "<h2>Hello</h2><p>World <a href='...'>link</a></p>"
// Render anywhere, store in any DB columnEditor.jsJSON block output
import EditorJS from '@editorjs/editorjs';
import Header from '@editorjs/header';
import List from '@editorjs/list';
import Paragraph from '@editorjs/paragraph';
// Block-based — outputs JSON, not HTML
const editor = new EditorJS({
holder: 'editorjs',
tools: {
header: { class: Header, inlineToolbar: true },
list: { class: List, inlineToolbar: true },
},
});
// Must save() — async, returns JSON blocks
const data = await editor.save();
// { blocks: [
// { type: "header", data: { text: "Hello", level: 2 } },
// { type: "paragraph", data: { text: "World" } }
// ]}
// You must implement your own HTML rendererChoose Scribe when…
Choose Editor.js when…
Need HTML output? Scribe is ready.
No JSON renderer to write. No async save loops. Just editor.getHTML() and you're done.
Scribe vs Editor.js — common questions
What is the difference between Scribe and Editor.js?
Scribe is a traditional inline WYSIWYG editor that outputs clean HTML — ideal for web content that renders directly in a browser. Editor.js is a block-based editor that outputs structured JSON — ideal for CMS platforms that need to render content in multiple formats (web, mobile app, PDF). Choose Scribe if you need HTML output; choose Editor.js if you need portable JSON blocks.
Does Editor.js output HTML?
No. Editor.js outputs a structured JSON object with typed blocks (paragraph, header, list, image). To display it as HTML, you need a separate renderer library. Scribe outputs clean, semantic HTML directly without any extra rendering step.
Does Scribe support inline formatting like Editor.js?
Yes. Scribe supports all common inline formatting: bold, italic, underline, strikethrough, links, headings, and lists. It also features a floating selection toolbar and a fixed toolbar mode. Editor.js's inline formatting is limited by design — it focuses on block-level content rather than inline-rich text.
Can I use Editor.js for simple blog or form content editing?
You can, but it may be overkill. Editor.js is best suited for CMS or documentation platforms where content is stored as typed blocks. For simple blog editors, form inputs, or SaaS text areas, Scribe's inline WYSIWYG with direct HTML output is a better fit.
Also compare Scribe with:
Use Scribe in your framework: