# BlockNote vs Editor.js: two block editors, six times apart in weight

*Source: https://www.editorstack.cc/compare/blocknote-vs-editorjs — last updated 2026-09-17. Licensed CC BY 4.0 with attribution to EditorStack.*

## Summary

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

## At a glance

| Product | Type | Licence | Frameworks | Bundle (min+gzip) | Price from | Self-hosted | White label | Score |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| [BlockNote](https://www.editorstack.cc/libraries/blocknote) | library | MPL-2.0 | React, Vue | 386.1 kB gzip | from $195/mo | Yes | Yes | not scored |
| [Editor.js](https://www.editorstack.cc/libraries/editorjs) | library | Apache-2.0 | Any (framework-agnostic) | 64.3 kB gzip | Free (open source) | Yes | Yes | 7.7 |

## 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](/libraries/editorjs)** 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](/libraries/blocknote)** is built on ProseMirror and [Tiptap](/libraries/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

1. **Is our front end React?** If not, the choice is made.
2. **Do we need inline mentions, comments or collaboration soon?** Yes favours BlockNote.
3. **What is our JavaScript budget on the editing route?** The measured gap is 321.8 kB.
4. **Do we want the interface decided for us?** BlockNote decides it; Editor.js leaves most of it to
   tools you choose.
5. **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](/research/bundle-size-benchmark-2026). For the inline-versus-block question on its
own, [Editor.js vs Tiptap](/compare/editorjs-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.