TipTap: Open Source Frameworks & Platforms

What is TipTap?

What it is

Tiptap is a headless, framework-agnostic rich text editor framework built on ProseMirror. It provides the core editing logic and state management without imposing a user interface, allowing developers to build custom editing experiences tailored to their design systems. It lives in the JavaScript/TypeScript ecosystem and integrates with React, Vue, or plain JavaScript projects.

The concrete problem it solves is the lack of flexible, extensible rich text editing in modern web applications. Prebuilt WYSIWYG editors often force UI constraints, require workarounds for customization, or lack support for advanced editing patterns like collaborative editing or custom document structures. Tiptap removes these limitations by exposing low-level control over nodes, marks, commands, and extensions.

Key capabilities

Headless architecture: no built-in UI, enabling full design control via custom components
Framework-agnostic: works with React, Vue, Svelte, or vanilla JS through separate renderer packages
Extension-based architecture: supports over 100 built-in and community extensions for features like tables, code blocks, and drag-and-drop
Custom node and mark definitions: developers can define new document structures and inline formatting via the ProseMirror API
Collaboration-ready: integrates with the open-source Hocuspocus backend for real-time collaborative editing using Yjs
Renderless components: provides React and Vue wrapper components that decouple state from UI rendering
TypeScript-first: fully typed with strict type definitions across core and extension packages

Who uses it and how

SaaS platforms build custom content authoring tools by composing Tiptap extensions and custom UI components
Internal tools teams integrate Tiptap into admin dashboards for rich document creation without external dependencies
Open-source projects use it as a base for documentation systems or wiki engines, leveraging its extensibility and permissive MIT license
Teams building collaborative applications pair Tiptap with Hocuspocus to enable real-time co-editing without vendor lock-in

Getting started

Install via npm: npm install @tiptap/core @tiptap/starter-kit and import the editor in React or Vue. Official starter kits and UI templates are available in the documentation and CodeSandbox examples. Docker is not used; deployment is standard frontend asset bundling.

When to use it — and when not to

Use Tiptap when you need full control over editor behavior, custom document schemas, or integration with existing design systems. Avoid it if you need a drop-in WYSIWYG with minimal setup—its headless nature requires building the UI layer yourself. It replaces paid editors like Quill or TinyMCE but demands more engineering effort. Self-hosting requires no backend for basic editing, but collaboration via Hocuspocus needs a Node.js server and Redis for scaling. The high open issue count (846) suggests active development but potential instability in newer features.

project readme (upstream, from github) — read inline

Tiptap Editor

The Tiptap Editor is a headless, framework-agnostic rich text editor that's customizable and extendable through extensions. Its headless nature means it comes without a set user interface, offering full design freedom (for a jumpstart, see linked UI templates below). Tiptap is based on the highly reliable ProseMirror library.

Tiptap Editor is complemented by the collaboration open-source backend Hocuspocus. Both the Editor and Hocuspocus form the foundation of the Tiptap Suite.

How does the Tiptap Editor work?

Headless Framework: Tiptap does not rely on a user interface. So there is no need for class overrides or code hacks. If you do need an example UI feel free to browse our UI templates linked below.
Framework-agnostic: The Tiptap Editor is designed to work across different frontend frameworks. This means whether you're using Vue, React, or plain JavaScript, Tiptap integrates without compatibility issues.
Extension based: Extensions in Tiptap allow for a tailored editing experience, from simple text styling to advanced features like drag-and-drop block editing. You have the option to choose from over 100 extensions available in the documentation and community to enhance your editor's functionality.
Customize your UX: The editor was built to give you control to define your own extensions and nodes.

Editor Pro Extensions

The Pro Extensions are a set of advanced functionalities that enhance the capabilities of the Tiptap Editor. They are additional features that can be integrated into the base editor to provide more sophisticated editing options.

Key functionalities include collaborative editing, commenting, versioning, document conversion and AI related features. Review the docs right here.

Pro Extensions need a valid subscription.

Make your editor collaborative

Interested in collaborative editing? Check out our open-source package Hocuspocus - a collaboration backend built around the CRDT power of Yjs. Hocuspocus serves as the backbone for the Tiptap Suite.

Documentation

For more detailed information, make sure to check out our documentation. If you encounter any problems or have suggestions for our system, please open an issue.

Examples, CodeSandbox and UI Templates

Have a look at the examples to see Tiptap in action or review and fork our codesandboxes.

Basic example of the Tiptap editor.
Collaboration ready Tiptap CodeSandbox
React notion-like block editor template: Demo

About Tiptap

Tiptap is a collection of developer components based on open-source technology, forming the basis of our advanced, paid features. It includes the open-source editor component, collaboration features, Content AI, and Tiptap Cloud. We are developing open-source products that also shape our paid features. We're committed to improving both, ensuring quality and reliability in every update.

For more details, visit the Tiptap documentation or website.

Community

For help, discussion about best practices, or any other conversation that would benefit from being searchable:

Discuss Tiptap on GitHub

Sponsors 💖

Complish

Storyblok

PostHog

Reflect

Ziff Media

Basewell

Poggio

iFixit, ApostropheCMS, Novadiscovery, Omics Data Automation, Flow Mobile, DocIQ and hundreds of awesome individuals.

Contributing

Feel like adding some magic of your own to Tiptap Editor Core? We welcome contributions! Please see our CONTRIBUTING guidelines for how to get started.

Contributors

Sam Willis, Brian Hung, Dirk Holtwick, Sam Duvall, Christoph Flathmann, Erick Wilder, Marius Tolzmann, jjangga0214, Maya Nedeljkovich, Ryan Bliss, Gregor and many more.

License

The MIT License (MIT). Please see License File for more information.

Frequently asked questions

Is TipTap free to use?

TipTap is open source under the MIT licence. There is no licence fee and no seat count — you can self-host it or, where the project offers one, pay a vendor for a managed version instead.

What does TipTap do?

Craft rich text experiences with ease

What is TipTap written in?

TipTap is primarily written in TypeScript. Its source is publicly available at https://github.com/ueberdosis/tiptap, and it has 38,424 GitHub stars.