# Tiptap review: a headless editor framework you build the UI for

*Source: https://www.editorstack.cc/libraries/tiptap — last updated 2026-08-20. Licensed CC BY 4.0 with attribution to EditorStack.*


## Summary

- Tiptap is a headless rich-text editor framework: it supplies the document model, commands and extension system, and supplies no toolbar, menu or button, because the interface is expected to be yours.
- We measured @tiptap/react 3.31.3 with StarterKit at 123.3 kB gzip; in our time-to-editor benchmark (3.30.2) it reached a rendered editor in 11 lines of application code and a median of 171 ms.
- It is a document editor, not a page builder: there is no canvas, no breakpoints and no style manager, so a landing-page requirement points somewhere else entirely.

## Quick facts

| Fact | Value |
| --- | --- |
| Type | library |
| Licence | MIT |
| First release | 2020-11 |
| Language | TypeScript |
| Frameworks | Any (framework-agnostic) |
| SSR support | partial |
| Bundle (min+gzip) | 123.3 kB gzip |
| Pricing | Free tier, paid plans undisclosed |
| npm weekly downloads | 13,973,443 |
| GitHub stars | 38,426 |
| Latest version | 3.31.3 |
| Last verified | 2026-08-20 |
| Drag & drop canvas | Partial |
| Responsive breakpoints | No |
| Visual style manager | No |
| Custom components | Yes |
| Data binding | No |
| E-commerce blocks | No |
| Email HTML export | No |
| AI generation | Via plugin |
| Editor i18n | Partial |
| White label | Yes |
| Self-hosted | Yes |

## What Tiptap is, and who it is for

Tiptap is what you reach for when the editing surface has to be yours. It gives you ProseMirror's
document model wrapped in an extension system that is far more pleasant than ProseMirror's own API,
and then it stops: there is no toolbar, no bubble menu, no slash command, no file uploader. Those are
components you write against commands the framework exposes.

That makes it a strong fit for products where the editor is part of a designed interface — a
knowledge base, a CRM notes field, a CMS body editor, an AI writing surface — and a poor fit for a
team that expected to install an editor and see one.

It is in this dataset because it is routinely shortlisted next to [Plate](/libraries/plate),
[Editor.js](/libraries/editorjs) and [Lexical](/libraries/lexical), and because those four are
frequently confused with page builders. They are not: a requirement containing the words "columns",
"breakpoints" or "brand colours" belongs with [GrapesJS](/libraries/grapesjs) or
[Puck](/libraries/puck) instead.

## Architecture: extensions over ProseMirror

An extension can contribute nodes, marks, keyboard shortcuts, input rules, commands and rendering
behaviour, and extensions compose into a schema. StarterKit is a bundle of the common ones —
paragraphs, headings, lists, bold, italic, history — which is why the getting-started example is so
short.

Underneath sits ProseMirror, and that matters in both directions. It gives you a battle-tested,
transaction-based document model with strong guarantees about valid state. It also means that when
something behaves unexpectedly, the concepts you need are ProseMirror's: schema, transactions,
plugins, decorations. Tiptap does not hide that permanently, and the documentation stops short of
where ProseMirror's begins.

The framework-agnostic core with first-party React and Vue bindings is worth noting. Of the
headless document-editing frameworks in this dataset, only Tiptap and [Editor.js](/libraries/editorjs)
can serve a Vue product without community glue. The finished editors,
[CKEditor 5](/libraries/ckeditor) and [TinyMCE](/libraries/tinymce), also ship first-party Vue
integrations — with a toolbar you did not design and a GPL-or-commercial licence attached.

## Getting started

This is the file from our benchmark, unedited. Eleven lines — the shortest React integration of the
eight applications we measured.

```jsx
import { createRoot } from 'react-dom/client';
import { EditorContent, useEditor } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';

function App() {
  const editor = useEditor({
    extensions: [StarterKit],
    content: '<h1>Hello editor</h1><p>Type here.</p>',
  });
  return <EditorContent editor={editor} style={{ padding: 16 }} />;
}

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

![The Tiptap benchmark application showing an editable heading and paragraph with no toolbar or editor chrome](https://www.editorstack.cc/screenshots/tiptap-minimal.png)

*Tiptap 3.30.2 from the code above, screenshotted from our own build. There is no toolbar because Tiptap does not ship one — that is the product decision, not an omission.*

Median 171 ms to a rendered editor. Compare that with [Plate](/libraries/plate) at 209 ms and
[Lexical](/libraries/lexical) at 159 ms: within this group the timings are close enough that they
should not decide anything, and the [benchmark page](/research/time-to-first-editor-benchmark)
explains why we publish them anyway.

## Strengths

**The extension model is the whole API.** Configure a list, get an editor. Adding a custom node type
is one file, and the typed command API means mistakes surface at compile time.

**Framework-agnostic core.** First-party React and Vue bindings from one editing core, which no other
headless rich-text framework here offers.

**ProseMirror underneath.** A document model with real guarantees, years of edge cases handled, and
an escape hatch to raw ProseMirror plugins when the extension API is not enough.

**Documentation organised by task.** Each extension has a runnable example and an explicit install
path — better than most libraries in this dataset.

**A clear upgrade path for hard features.** Collaboration, comments and AI exist as maintained
products rather than as abandoned community experiments.

## Limitations

**No interface, at all.** Toolbars, bubble menus, slash commands, link dialogs and upload handling are
your code. For a designed product this is the point; for a team on a deadline it is a surprise, and
it is the single most common reason Tiptap gets swapped out again.

**Heavier than the minimal comparison suggests.** 123.3 kB gzip for the React binding plus StarterKit,
against [Lexical](/libraries/lexical) at 104.9 kB and [Editor.js](/libraries/editorjs) at 64.3 kB.
Realistic editors add extensions on top of all three.

**ProseMirror leaks through.** Not a flaw, but a cost: debugging unusual behaviour means learning a
second mental model, and the documentation hands you off at that boundary.

**Some expected capabilities are commercial.** Collaboration, comments, AI and document conversion are
paid services. That is a legitimate business model and it is worth establishing before a
proof of concept assumes they are free.

**Not a page builder.** No canvas, no layout, no styling for end users. Worth repeating because the
category names overlap.

## Pricing

The framework and its open-source extensions are MIT licensed, free, with no ceiling. The hosted
services are separately priced; our verification pass did not capture the current figures, so the
dataset records `paid_from_usd` as null rather than an estimate.

For a hands-on comparison against the closest alternatives, see
[Tiptap vs Lexical](/compare/tiptap-vs-lexical), [Plate vs Tiptap](/compare/plate-vs-tiptap) and
[Editor.js vs Tiptap](/compare/editorjs-vs-tiptap).

## Who it fits, and who it does not

**Good fit**

- Products that need a rich-text editor whose interface is entirely their own, because Tiptap ships no UI to override
- Teams that want the same editing core across React and Vue rather than one library per framework
- Editors that will grow collaborative features later, since real-time editing is a supported path rather than a rewrite

**Poor fit**

- Page building, because there is no canvas, no layout primitives and no style manager anywhere in the framework
- Teams that want a toolbar and menus on install, since building the interface is the deal Tiptap offers
- Products that need email-safe HTML output rather than structured document content


## Tiptap against its nearest neighbours

| 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 |
| [Lexical](https://www.editorstack.cc/libraries/lexical) | library | MIT | Any (framework-agnostic) | 104.9 kB gzip | Free (open source) | Yes | Yes | 7.4 |
| [Plate](https://www.editorstack.cc/libraries/plate) | library | MIT | React | 150.8 kB gzip | Free (open source) | Yes | Yes | 8 |


## Our scores

- **developer experience: 8.5/10.** The extension model is the whole API and it is coherent: configure a set of extensions, get an editor instance, render it where you like. Our benchmark reached a working editor in eleven lines. The friction is that being headless means every visible control is your code, and that reality arrives immediately after the first render.
- **extensibility: 9/10.** Extensions reach schema, keyboard handling, input rules, commands and rendering, and ProseMirror sits underneath for anything the extension API does not cover. Very little requires a fork, and the escape hatch to raw ProseMirror plugins means the ceiling is effectively the ceiling of ProseMirror itself.
- **documentation: 8.5/10.** Documentation is organised by task with runnable examples per extension and explicit installation paths, which is unusual in this category. It thins out where ProseMirror concepts leak through — schema design and transaction handling assume you will read upstream documentation eventually.
- **ecosystem: 8/10.** A large first-party extension catalogue covers most document requirements, and community extensions are plentiful because the ProseMirror community overlaps. Some capabilities teams expect for free — collaboration, comments, AI — are commercial services rather than open extensions, which is worth establishing before adopting.
- **time to production: 7.5/10.** A functional editing surface takes hours; a product takes longer because toolbars, bubble menus, slash commands and upload handling are all yours. That is the same trade Craft.js makes for page building, and it prices out similarly: fast to something working, slower to something shippable.


## Alternatives

- [Tiptap vs Editor.js](https://www.editorstack.cc/compare/editorjs-vs-tiptap)
- [Tiptap vs Plate](https://www.editorstack.cc/compare/plate-vs-tiptap)
- [Tiptap vs Quill](https://www.editorstack.cc/compare/quill-vs-tiptap)
- [Tiptap vs BlockNote](https://www.editorstack.cc/compare/tiptap-vs-blocknote)
- [Tiptap vs CKEditor 5](https://www.editorstack.cc/compare/tiptap-vs-ckeditor)
- [Tiptap vs Lexical](https://www.editorstack.cc/compare/tiptap-vs-lexical)


## Frequently asked questions

### Is Tiptap free?

The editor framework and its open-source extensions are MIT licensed with no usage ceiling. Tiptap separately sells hosted services — collaboration, comments, AI, document conversion — on paid plans, and those prices were not captured in our verification pass, so we record them as null rather than guess.

### How big is Tiptap?

We measured @tiptap/react 3.31.3 together with StarterKit at 123.3 kB gzip (raw figures are in the dataset), with React treated as external because a React application already ships it.

### Tiptap or Lexical?

Tiptap is faster to something usable — 11 lines against 25 in our benchmark — and has the larger extension catalogue. Lexical has the smaller core and a stricter state model. Our head-to-head compares them directly.

### Does Tiptap work outside React?

Yes. The core is framework-agnostic with first-party React and Vue bindings, which is unusual among the headless rich-text frameworks in this dataset — Plate and Lexical's React binding are both React-specific. CKEditor 5 and TinyMCE also have first-party Vue integrations, but they are finished editors rather than frameworks.

### Can Tiptap build landing pages?

No. It has no canvas, no layout primitives, no responsive breakpoints and no style manager. Products that need those want GrapesJS or Puck, and the comparison pages set out where the line falls.


## Sources

1. [npm registry metadata for @tiptap/react (MIT licence, first publish date, latest version)](https://registry.npmjs.org/@tiptap/react) — accessed 2026-08-20
2. [npm registry metadata for @tiptap/core (first publish date November 2020)](https://registry.npmjs.org/@tiptap/core) — accessed 2026-08-20
3. [Tiptap documentation](https://tiptap.dev/docs) — accessed 2026-08-20
