BlockNote vs Editor.js: two block editors, six times apart in weight
BlockNote and Editor.js both model documents as blocks. BlockNote is React-only with a Notion-style interface and inline formatting over ProseMirror; Editor.js is framework-agnostic with block tools and JSON output. We measured 386.1 kB against 64.3 kB gzip.
TL;DR
- Both editors organise content into blocks, but they are built differently: BlockNote sits on ProseMirror and Tiptap inside React, Editor.js is a framework-agnostic editor whose block tools each own their DOM and save JSON.
- Measured: @blocknote/react 0.54.2 with the Mantine view at 386.1 kB gzip, React external; @editorjs/editorjs 2.31.7 core at 64.3 kB with no block tools. BlockNote's figure includes its full interface; Editor.js's grows with every tool.
- Licences: Editor.js is Apache-2.0 including its official tools; BlockNote's core is MPL-2.0, with AI, multi-column and exporter packages under GPL-3.0 or a commercial licence.
BlockNote vs Editor.js 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.
| Fact | BlockNote | Editor.js |
|---|---|---|
| Type | library | library |
| Licence | MPL-2.0 | Apache-2.0 |
| First release | 2022-08 | 2019-02 |
| Frameworks | React, Vue | Any (framework-agnostic) |
| SSR support | none | none |
| Bundle (min+gzip) | 386.1 kB gzip | 64.3 kB gzip |
| Price from | from $195/mo | Free (open source) |
| Drag & drop canvas | Partial | Partial |
| Responsive breakpoints | No | No |
| Visual style manager | No | No |
| Custom components | Yes | Yes |
| Data binding | No | No |
| E-commerce blocks | No | No |
| Email HTML export | Via plugin | No |
| AI generation | Via plugin | Via plugin |
| Editor i18n | Yes | Yes |
| White label | Yes | Yes |
| Self-hosted | Yes | Yes |
| Our score (0–10) | Not scored | 7.7 |
| Last verified | 2026-09-17 | 2026-08-19 |
Same idea, different foundations
A block editor stores a document as an ordered set of typed blocks rather than as one stream of markup. Both of these do that. What differs is everything underneath.
Editor.js owns a contenteditable surface and delegates each block to a tool class that renders its own DOM and saves its own data. It is framework-agnostic and outputs clean JSON you render yourself.
BlockNote is built on ProseMirror and Tiptap, renders in React, and ships a finished Notion-style interface: side menu with drag handle, slash menu, formatting toolbar.
Where BlockNote wins
Inline-level richness. Custom inline content and styles are part of its schema API, and the ProseMirror foundation handles partial-selection formatting. Editor.js's tools work at block level.
Collaboration without building it. Yjs-based real-time collaboration and comments are listed in BlockNote's free Community tier.
Interface included. Drag handles, slash menu and formatting toolbar are documented components of the default view.
A path to exports. PDF, DOCX, ODT and email exporters exist as XL packages — under GPL-3.0 or a commercial licence.
Where Editor.js wins
A sixth of the weight. 64.3 kB gzip against 386.1 kB, before either adds anything.
Framework-agnostic. One editor for React, Vue, Angular or none. BlockNote is React-only.
Five lines to start. Our Editor.js benchmark application is five lines; our BlockNote application is fourteen.
Apache-2.0 all the way down. No copyleft packages anywhere in the official tool set.
A clean install. Editor.js installed without flags. BlockNote's documented npm install failed
with ERESOLVE on npm 10.8.2 until we added --legacy-peer-deps.
Migration between them
Both store blocks, so the mapping is conceptually direct: paragraph to paragraph, heading to heading, list to list. The friction is inline content. Editor.js tools typically store inline formatting as HTML strings inside block data, which must be parsed into BlockNote's inline content; the reverse direction flattens richer inline structures into those strings. Custom Editor.js tools become custom BlockNote block specs, which is a rewrite.
Decision checklist
- Is our front end React? If not, the choice is made.
- Do we need inline mentions, comments or collaboration soon? Yes favours BlockNote.
- What is our JavaScript budget on the editing route? The measured gap is 321.8 kB.
- Do we want the interface decided for us? BlockNote decides it; Editor.js leaves most of it to tools you choose.
- Will we need PDF or DOCX export in a closed-source product? With BlockNote, that is the commercial XL licence.
The number that matters
Six times — BlockNote's documented setup against Editor.js's core in our bundle benchmark. For the inline-versus-block question on its own, Editor.js vs Tiptap goes deeper.
Frequently asked questions
- Which is lighter?
- Editor.js, at 64.3 kB gzip for the core against 386.1 kB for BlockNote with the Mantine view. The comparison flatters Editor.js somewhat, because its figure contains no block tools and BlockNote's contains its whole interface.
- Which works outside React?
- Editor.js. It mounts against a DOM element and has community wrappers for React, Vue and Angular. BlockNote has no first-party Vue or Angular package.
- Which handles inline formatting and collaboration better?
- BlockNote. It is built on ProseMirror, supports custom inline content and styles, and lists Yjs-based real-time collaboration and comments in its free tier. Editor.js's API is block-level.
Facts about BlockNote were verified on 2026-09-17 and facts about Editor.js on 2026-08-19. Full source lists are on the BlockNote review and the Editor.js review.