BlockNote review: a Notion-style block editor for React, assembled

What BlockNote is, and who it is for

BlockNote answers a request product teams make constantly: "an editor like Notion's". Documents are organised into blocks, a + button and a drag handle appear beside whichever block you hover, a slash menu inserts new ones, and a formatting toolbar appears on selection. All of that is in the package rather than on your backlog.

Underneath, the documentation says BlockNote "is built on top of the widely used ProseMirror and TipTap", and @blocknote/core depends on @tiptap/core directly. So the useful way to place it is as Tiptap with the interface already built and the block model already decided — which is exactly the comparison in Tiptap vs BlockNote.

It suits React products with document-style content: wikis, notes, project docs, AI writing surfaces. It suits poorly products outside React, products with a tight JavaScript budget on the editing route, and products that need a different interaction model from the one it ships.

Licensing: MPL core, copyleft XL packages

The npm registry is precise here. @blocknote/core, @blocknote/react, @blocknote/mantine and the other core packages carry MPL-2.0. The @blocknote/xl-* packages — AI, multi-column layouts and the PDF, DOCX, ODT, email and Typst exporters — carry "GPL-3.0 OR PROPRIETARY".

The vendor's pricing page states the consequence: the MPL-2.0 core "allows you to use BlockNote in commercial and closed-source applications - even without a subscription", while the XL packages are dual-licensed, and the commercial licence for them comes with the Business tier and covers one application.

MPL-2.0 is file-level copyleft: modifications to BlockNote's own files must be shared, your application code does not. That is a lighter obligation than the GPL attached to CKEditor 5 and TinyMCE, and a heavier one than Tiptap's MIT.

Getting started

The file from our benchmark application, unedited: fourteen lines, following the documented quick start with one stylesheet import and initial content.

import { createRoot } from 'react-dom/client';
import { useCreateBlockNote } from '@blocknote/react';
import { BlockNoteView } from '@blocknote/mantine';
import '@blocknote/mantine/style.css';

function App() {
  const editor = useCreateBlockNote({
    initialContent: [
      { type: 'heading', content: 'Hello editor' },
      { type: 'paragraph', content: 'Type here.' },
    ],
  });
  return <BlockNoteView editor={editor} />;
}

createRoot(document.getElementById('app')).render(<App />);

Two integration costs surfaced while building it, and both are recorded rather than smoothed over.

The documented install failed. npm install @blocknote/core @blocknote/react @blocknote/mantine in a fresh directory, on npm 10.8.2, stopped with ERESOLVE unable to resolve dependency tree. The conflict is in BlockNote's optional, Yjs-related @y/* peer dependencies. --legacy-peer-deps resolved it, and both our measurement scripts now pass that flag for BlockNote.

Stylesheet imports need the style export condition. BlockNote's CSS resolves through a package-exports condition that esbuild does not enable unless configured to. That is a bundler setting rather than a BlockNote defect, but it is worth checking in whatever build tool you use.

The application ran, but we have not published a timing for it: it was measured on a different machine from the time to first editor benchmark, and timings from two machines are not comparable.

Strengths

The Notion-style interface is included. Slash menu, side menu with drag handle and formatting toolbar are documented components of the default view, behind fourteen lines of setup. Building the same on Tiptap is the project BlockNote already finished.

Collaboration in the free tier. The documentation describes Yjs-based real-time collaboration, and the pricing page lists it, with comments, under the free Community tier.

Custom schemas. You can add your own block types, inline content and text styles rather than being limited to the defaults.

Localisation. Locales ship in @blocknote/core/locales and are passed to the editor as a dictionary.

A choice of UI kit. Besides the Mantine view we measured, @blocknote/shadcn and @blocknote/ariakit are published first-party.

Limitations

Heavy in its documented form. 386.1 kB gzip with the Mantine view, React external — the second-heaviest bundle in our benchmark, behind TinyMCE. We did not measure the shadcn or Ariakit views, which may differ.

React only. No first-party Vue or Angular package. Non-React products should look at Tiptap or the finished editors instead.

The valuable extras are copyleft. AI, multi-column layouts and every exporter are GPL-3.0 or commercial. A closed-source product that needs PDF export is a Business-tier customer.

Install friction on npm. The ERESOLVE failure above is the kind of thing that costs an afternoon the first time and nothing afterwards, but it should not happen on a documented command.

Pre-1.0. The version line is 0.54.2, so treat the public API as one that can still move.

The interaction model is decided. Blocks with handles and a slash menu. If your product needs a different editing experience, you are working against the library rather than with it.

Pricing

Vendor-published on the day we checked. Community: free, including all blocks and UI components, drag-and-drop editing, slash menus, real-time collaboration and comments, with XL packages free for open-source projects under GPL-3.0. Business: $195 per month billed yearly ($2,340 per year), which includes the commercial licence for the XL packages for one application and standard support. Enterprise: custom.

For where BlockNote sits against its neighbours, see BlockNote vs Editor.js and the rich-text editor comparison.