Skip to content
Get packs

Guide · Open source

How to use Tiptap: headless rich text editor guide

Updated · written with AI from the project's own documentation and checked against our catalogue data

Tiptap is an open-source rich text editor component you add to a web app so users can write formatted text such as bold text, lists and headings. It is headless, so it ships without a ready-made interface and you design the look yourself. This guide explains what Tiptap does, how it is put together, and what you need to decide before you start building with it.

Tiptapueberdosis/tiptap · ★ 38.9k · MIT

Quick start

  1. 1Decide if you need a code-based editor. Tiptap requires you to build the interface yourself, so confirm your team can write the front end code.
  2. 2Read the installation docs. Follow the official installation page at tiptap.dev/docs/editor/installation to install the package with your package manager.
  3. 3Open an example. Fork the basic CodeSandbox example to see a working editor before writing your own code.
  4. 4Add the extensions you need. Choose from the extensions list in the documentation and add them to your editor setup.
  5. 5Style the editor yourself. Because Tiptap is headless, write your own CSS or components for the editor's look.
  6. 6Add collaboration if needed. Look at Hocuspocus for an open-source collaboration backend, and check Pro Extensions if you need paid features.

What is Tiptap and how does it work?

Tiptap is a headless, framework-agnostic rich text editor. Headless means it comes without a set user interface, which gives you full design freedom. It is based on the ProseMirror library.

Features are added through extensions, which range from simple text styling to advanced features such as drag-and-drop block editing. The project describes over 100 extensions in its documentation and community lists.

  • Headless: no built-in UI, so no class overrides or code hacks are needed to restyle it.
  • Framework-agnostic: the project says it works with Vue, React or plain JavaScript.
  • Extension based: pick the features you need and add your own extensions and nodes.
  • Built on ProseMirror, a library the source describes as highly reliable.

Install Tiptap in your project

Tiptap is installed through a package manager. The README does not list specific prerequisites, and the package name shown in its badges is @tiptap/core. For the exact installation steps, follow the official installation page at tiptap.dev/docs/editor/installation, since the README links to it for detailed information.

If you use a coding agent, the README also offers an optional agent skill that helps set up, extend and debug your editor. Run it from your application project.

npx skills add ueberdosis/tiptap --skill tiptap

Start from an example before building your own

The fastest way to see Tiptap working is to open one of the maintained examples. The README links a basic editor example on CodeSandbox, a collaboration-ready CodeSandbox, and a React notion-like block editor template with a demo.

You can fork these sandboxes and change them. The README also links the examples page at tiptap.dev/examples.

  • Basic example of the Tiptap editor (CodeSandbox).
  • Collaboration ready Tiptap CodeSandbox.
  • React notion-like block editor template with a live demo at templates.tiptap.dev.

Customize the editor with extensions and nodes

Extensions are how you shape the editing experience. The README points to the extensions list in the documentation and to a community list in the awesome-tiptap repository. When the built-in options are not enough, you can define your own extensions and nodes using the guides on tiptap.dev.

Because the editor is headless, the visual design of your custom blocks is up to you.

  • Read the extensions list at tiptap.dev/docs/editor/extensions.
  • Follow the custom extensions guide to build your own behaviour.
  • Use the nodes API reference to define custom blocks.

Add collaborative editing and Pro Extensions

For real-time collaboration, the README points to Hocuspocus, an open-source collaboration backend built around the CRDT approach of Yjs. Hocuspocus is part of the wider Tiptap Suite.

Pro Extensions are separate, paid add-ons covering collaborative editing, commenting, versioning, document conversion and AI features. The README states that Pro Extensions need a valid subscription.

  • Hocuspocus: open-source collaboration backend.
  • Pro Extensions: require a valid subscription.
  • Check the Pro Extensions docs at tiptap.dev/docs/editor/extensions before you plan around them.

Get help and troubleshoot problems

If you run into problems or have suggestions, the README asks you to open an issue on the GitHub repository. For general help and discussion of best practices, it points to the GitHub Discussions page, which is searchable.

The official documentation at tiptap.dev/docs is the main reference for detailed information.

  • Report bugs or suggestions by opening an issue.
  • Ask questions on GitHub Discussions.
  • Read the documentation at tiptap.dev/docs/editor/introduction.

What people use it for

  • A custom rich text editor for a web product's comment or note fields.
  • A notion-style block editor built with React, starting from the template.
  • A shared editor for multiple teams using Vue, React or plain JavaScript.
  • An editor with custom blocks or nodes for a specific document format.
  • A collaborative writing tool using Hocuspocus for real-time editing.

Frequently asked questions

Is Tiptap free?

Tiptap is released under the MIT licence, and the core editor is open source. The README says Pro Extensions require a valid subscription, so advanced paid features are not free.

Is Tiptap a ready-made editor?

No. Tiptap is headless, so it ships without a user interface and you design the look yourself. The README suggests UI templates if you want a starting point.

What is Tiptap built on?

Tiptap is based on the ProseMirror library. Features are added through extensions.

Does Tiptap work with React and Vue?

The README says Tiptap is framework-agnostic and works with Vue, React or plain JavaScript without compatibility issues.

What are the alternatives to Tiptap?

The source lists ProseMirror, Lexical, Slate and Quill as comparable projects. Pick based on how much control and built-in features you need.

Does Tiptap support real-time collaboration?

Collaboration is offered through Hocuspocus, an open-source backend built around Yjs, and through Pro Extensions that need a valid subscription.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Tiptap suits developers who are building a custom text editor into a web product and want full control over its design and custom nodes. It is a poor fit for non-developers who want a ready-made editor with no coding, or for projects that depend on paid Pro Extensions without a subscription. In those cases, consider a ready-made editor or one of the comparable projects the source lists.

Install options & downloads