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

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

## Summary

- BlockNote is built on ProseMirror and Tiptap — @blocknote/core depends on @tiptap/core — and adds a finished block-editing interface: side menu with drag handle, slash menu and formatting toolbar.
- Measured with React external: @tiptap/react 3.31.3 with StarterKit at 123.3 kB gzip, @blocknote/react 0.54.2 with the Mantine view at 386.1 kB. The difference is mostly interface you would otherwise build.
- Licences differ in a way that matters: Tiptap is MIT; BlockNote's core is MPL-2.0 and its AI, multi-column and export packages are GPL-3.0 or commercial.

## At a glance

| Product | Type | Licence | Frameworks | Bundle (min+gzip) | Price from | Self-hosted | White label | Score |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| [Tiptap](https://www.editorstack.cc/libraries/tiptap) | library | MIT | Any (framework-agnostic) | 123.3 kB gzip | Free tier, paid plans undisclosed | Yes | Yes | 8.3 |
| [BlockNote](https://www.editorstack.cc/libraries/blocknote) | library | MPL-2.0 | React, Vue | 386.1 kB gzip | from $195/mo | Yes | Yes | not scored |

## 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](/libraries/tiptap) anyway. If
they are, [BlockNote](/libraries/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](/research/bundle-size-benchmark-2026), 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](/compare/blocknote-vs-editorjs).


## Frequently asked questions

### Is BlockNote just Tiptap with a UI?

It is built on Tiptap and ProseMirror, but it also decides the document model: content is organised into blocks, with its own schema API for custom blocks, inline content and styles. You get the interface and the block model together.

### Which is lighter?

Tiptap, at 123.3 kB gzip with StarterKit against 386.1 kB for BlockNote with the Mantine view, both with React external. Tiptap's figure includes no interface; BlockNote's includes its whole default UI.

### Which has free collaboration?

BlockNote lists Yjs-based real-time collaboration and comments in its free Community tier. Tiptap sells collaboration and comments as services on paid plans.

### Can I use either outside React?

Tiptap, yes: its core is framework-agnostic with a first-party Vue binding. BlockNote has no first-party Vue or Angular package.