Tiptap vs BlockNote: the engine, or the Notion-style editor built on it

One is built on the other

This is an unusual comparison because the libraries are not rivals in the ordinary sense. BlockNote's documentation says it is "built on top of the widely used ProseMirror and TipTap", and @blocknote/core lists @tiptap/core as a dependency.

So the real question is whether BlockNote's decisions — a block document model and a Notion-style interface — are the decisions you would have made on top of Tiptap anyway. If they are, BlockNote has already made them. If they are not, you will spend your time working around them.

Where Tiptap wins

Weight. 123.3 kB gzip against 386.1 kB. Your own interface adds to Tiptap's figure, but it is unlikely to add 262.8 kB.

Freedom of interaction model. Tiptap does not assume blocks, handles or a slash menu. A comment field, an inline notes editor or an unusual document surface fits without fighting a default UI.

MIT throughout. No copyleft anywhere in the open-source framework. BlockNote's MPL-2.0 core is friendly to closed-source products, but its XL packages are GPL-3.0 or commercial.

Vue. A first-party Vue binding from the same core. BlockNote is React-only.

Where BlockNote wins

The interface exists. Side menu with drag handle, slash menu, formatting toolbar and link toolbar are documented components of the default view. On Tiptap each is a component you design, build and maintain.

Collaboration in the free tier. Real-time collaboration and comments are listed under BlockNote's free Community tier; Tiptap sells its hosted equivalents.

A block schema API. Custom blocks, inline content and styles are first-class, with the block model already worked out.

A choice of UI kits. Mantine, shadcn and Ariakit views are published first-party.

The install notes

BlockNote's documented npm install failed with ERESOLVE on npm 10.8.2 in a fresh directory, over optional Yjs-related peer dependencies, until we added --legacy-peer-deps. Tiptap installed without flags. It is a one-time cost, and worth knowing before a proof of concept stalls on it.

Migration between them

Because BlockNote sits on Tiptap and ProseMirror, the conceptual distance is small, but stored formats are not interchangeable: BlockNote documents are arrays of blocks, Tiptap documents are ProseMirror JSON with whatever schema your extensions define. Plan a converter in either direction. Moving from BlockNote to Tiptap also means rebuilding every piece of interface BlockNote supplied.

Decision checklist

1. Is a Notion-style block editor exactly what we want? Yes favours BlockNote.
2. Is any front end not React? Tiptap is the only one of the two with an answer.
3. What is our JavaScript budget on the editing route? The measured gap is 262.8 kB.
4. Do we need AI or PDF and DOCX export in a closed-source product? With BlockNote that is the commercial XL licence.
5. Who builds and maintains the toolbar and menus? With Tiptap, you do.

The number that matters

262.8 kB — the gzip gap in our bundle benchmark, most of it the interface and UI kit you did not have to write. The neighbouring trade-off, block JSON without any ProseMirror underneath, is in BlockNote vs Editor.js.