What is this?
Tiptap is a headless, framework-agnostic rich text editor framework for web apps, built on top of ProseMirror and extended through extensions.
Tiptap is a headless, framework-agnostic rich text editor framework for web apps, built on top of ProseMirror and extended through extensions.What does 'headless' mean in practice — do I get an interface?No — it ships without any user interface, giving you full design freedom; if you want a jumpstart, there are linked UI templates. No CSS class overrides or hacks needed.
No — it ships without any user interface, giving you full design freedom; if you want a jumpstart, there are linked UI templates. No CSS class overrides or hacks needed.How do I add it to my project?Install the Tiptap npm packages and follow the docs quickstart for Vue, React or plain JavaScript (the tooling requires Node 24+). Ready-made examples and CodeSandboxes are there to fork.
Install the Tiptap npm packages and follow the docs quickstart for Vue, React or plain JavaScript (the tooling requires Node 24+). Ready-made examples and CodeSandboxes are there to fork.Do I have to use a particular frontend framework with it?No — it is framework-agnostic and integrates with Vue, React or plain JavaScript without compatibility issues. Under the hood everything is based on the ProseMirror library.
No — it is framework-agnostic and integrates with Vue, React or plain JavaScript without compatibility issues. Under the hood everything is based on the ProseMirror library.What's the hardest part of using it?Building your own editor interface: Tiptap gives you the engine, not the looks, so all design work is on you. The linked UI templates help you start faster.
Building your own editor interface: Tiptap gives you the engine, not the looks, so all design work is on you. The linked UI templates help you start faster.Is it actually free, or is there a paid side to it?The core editor is open source under the MIT license. The advanced Pro Extensions — collaboration, commenting, versioning, document conversion, AI features — and Tiptap Cloud require paid subscriptions.
The core editor is open source under the MIT license. The advanced Pro Extensions — collaboration, commenting, versioning, document conversion, AI features — and Tiptap Cloud require paid subscriptions.Is collaborative editing built in?Through the companion open-source backend Hocuspocus, built around the CRDT power of Yjs — together with the editor it forms the Tiptap Suite. The README also links a collaboration-ready CodeSandbox to try it live.
Through the companion open-source backend Hocuspocus, built around the CRDT power of Yjs — together with the editor it forms the Tiptap Suite. The README also links a collaboration-ready CodeSandbox to try it live.What can I get out of the box from extensions?Over 100 extensions from the official docs and community, from simple text styling to advanced features like drag-and-drop block editing. You can also define your own extensions and nodes to tailor the editing experience.
Over 100 extensions from the official docs and community, from simple text styling to advanced features like drag-and-drop block editing. You can also define your own extensions and nodes to tailor the editing experience.Is there a ready Notion-style block editor example?Yes — the README links a React notion-like block editor template with a live demo, alongside a basic editor example and CodeSandboxes you can review and fork.
Yes — the README links a React notion-like block editor template with a live demo, alongside a basic editor example and CodeSandboxes you can review and fork.Which topics is it in?extensions, rich-text, wysiwyg-editor, js, wysiwyg, headless, drag-and-drop, text-editor, components, collaboration, editor, component-library
extensions, rich-text, wysiwyg-editor, js, wysiwyg, headless, drag-and-drop, text-editor, components, collaboration, editor, component-library