Skip to content
EditorStackPlayground

Editor.js vs Tiptap: block JSON or a rich-text document

Editor.js stores a linear list of typed blocks as JSON; Tiptap stores a rich-text document with inline formatting. The storage format decides this more than the editing experience does.

Updated · Editor.js review · Tiptap review

TL;DR

  • Editor.js models content as an ordered list of typed blocks with clean JSON output; Tiptap models a rich-text document where inline marks, mentions and links are first-class.
  • Our measurements: Editor.js 64.3 kB gzip and 5 lines of setup, Tiptap 123.3 kB and 11 lines — Editor.js is roughly half the weight for a deliberately narrower job.
  • If content must render on several surfaces from one stored representation, Editor.js's block JSON is easier to work with; if the requirement contains the word 'inline', Editor.js cannot express it.

Editor.js vs Tiptap at a glance

Generated from the same dataset as the main table, so this cannot drift out of sync with the rest of the site.

Editor.js and Tiptap compared on licence, framework support, capabilities and price
FactEditor.jsTiptap
Typelibrarylibrary
LicenceApache-2.0MIT
First release2019-022020-11
FrameworksAny (framework-agnostic)Any (framework-agnostic)
SSR supportnonepartial
Bundle (min+gzip)64.3 kB gzip123.3 kB gzip
Price fromFree (open source)Free tier, paid plans undisclosed
Drag & drop canvasPartialPartial
Responsive breakpointsNoNo
Visual style managerNoNo
Custom componentsYesYes
Data bindingNoNo
E-commerce blocksNoNo
Email HTML exportNoNo
AI generationVia pluginVia plugin
Editor i18nYesPartial
White labelYesYes
Self-hostedYesYes
Our score (0–10)7.78.3
Last verified2026-08-192026-08-20

The storage format is the decision

Ask what you will do with the content after it is saved.

Editor.js gives you an array of blocks, each with a type and a data object. Rendering it means mapping block types to markup on each surface you support. That is work, and it is straightforward work — and it means the same article can render as HTML, as native mobile views and as an email with three small renderers.

Tiptap gives you a document tree with inline marks. Rendering to HTML is built in; rendering to a non-HTML surface means walking a richer tree with more cases. In exchange, the content faithfully represents what the writer did, including formatting that spans partial sentences.

Where Editor.js wins

Half the weight, and the simplest integration in this dataset at five lines.

Structured output that travels. Blocks are queryable and diffable, and multi-surface rendering is a solved shape rather than an exercise.

Framework-agnostic with no React requirement — though note Tiptap's core is framework-agnostic too, with a Vue binding Editor.js matches through community wrappers.

Users cannot produce surprising markup, because the tool set defines what can exist.

Where Tiptap wins

Inline everything. Marks, links, mentions, comments and partial-selection formatting. Editor.js cannot express these, and no plugin closes that gap.

A writing experience closer to a word processor, which matters when your users are writers rather than form-fillers.

A larger extension catalogue covering tables, task lists, code blocks with syntax choice and more.

A path to collaboration without changing framework.

The test that settles it

Write down the hardest sentence your users must be able to produce.

If it is "a paragraph, then an image with a caption, then a list", Editor.js does it for half the weight and a fifth of the setup.

If it is "a sentence where two words are bold, one is a link, and a colleague is mentioned mid-clause", Editor.js structurally cannot, and the conversation is over.

Migration between them

Editor.js to Tiptap is the common direction, usually after hitting the inline wall. Standard block types map onto Tiptap nodes cleanly; the effort concentrates in parsing whatever inline HTML you stored inside block data into real marks.

Tiptap to Editor.js is lossy by construction — inline formatting has nowhere to go — and is rarely worth doing.

Decision checklist

  1. Do we need inline-level features now or within two years?
  2. How many surfaces render this content? More surfaces favour block JSON.
  3. Are our users writing prose or assembling content?
  4. What is our JavaScript budget on the editing route? The gap is 59.0 kB.
  5. Who writes the renderer? With Editor.js, you do, once per surface.

The number that matters

Five lines. Editor.js's setup is the shortest in this dataset, and it is the honest headline for a tool with the narrowest scope — the same trade appears in Editor.js vs Plate and Editor.js vs Lexical.

Frequently asked questions

Which produces cleaner stored content?
Editor.js, if clean means simple: typed blocks with their own data shapes. Tiptap's document is richer and more faithful to what the user wrote, which is a different kind of clean.
Which is lighter?
Editor.js at 64.3 kB gzip against Tiptap's 123.3 kB with StarterKit, both measured in our own benchmark.
Can Editor.js do mentions and comments?
Not properly. Those are inline-level features and Editor.js's API is block-level, which is the structural limit that sends teams to Tiptap, Plate or Lexical.

Facts about Editor.js were verified on 2026-08-19 and facts about Tiptap on 2026-08-20. Full source lists are on the Editor.js review and the Tiptap review.