explaingit

ueberdosis/tiptap

📈 Trending★ 36,826TypeScriptAudience · developerComplexity · 3/5ActiveLicenseSetup · easy

TLDR

Headless rich text editor framework that handles all editing logic (typing, formatting, undo/redo) without forcing a visual design, so you can build editors that match your app's look and feel.

Mindmap

mindmap
  root((tiptap))
    What it does
      Headless editor logic
      Handles formatting
      Manages undo/redo
      Structured content tree
    Tech stack
      TypeScript
      ProseMirror
      React/Vue adapters
      Yjs for collaboration
    Use cases
      Document editors
      Note-taking apps
      CMS platforms
      Real-time collaboration
    Extensions
      100+ available
      Bold, italic, tables
      Images, code blocks
      Mentions, drag-drop
    Key features
      Framework-agnostic
      Customizable styling
      Hocuspocus backend
      Reliable saving

Things people build with this

USE CASE 1

Build a document editor or note-taking app with custom styling that matches your brand.

USE CASE 2

Create a CMS where content editors can format text, add images, and organize content into structured blocks.

USE CASE 3

Add real-time collaborative editing to a web app so multiple users can write in the same document simultaneously.

USE CASE 4

Implement a comment or feedback system with rich formatting without using a third-party editor.

Tech stack

TypeScriptProseMirrorReactVueYjsHocuspocus

Getting it running

Difficulty · easy Time to first run · 5min
MIT license, use freely for any purpose, including commercial, as long as you include the copyright notice.

In plain English

Tiptap is a headless rich text editor framework for the web. "Headless" means it provides all the editing logic, handling typing, formatting, cursor position, undo/redo, structured content, without bundling any visual interface of its own. You provide the look and feel; Tiptap provides the brains. This solves a recurring problem for web developers: most "what you see is what you get" (WYSIWYG) editors come with fixed styling and limited customization, making it hard to match your app's design or add unusual formatting behaviors. Tiptap is built on top of ProseMirror, a battle-tested, low-level document editing library. ProseMirror is powerful but complex to use directly; Tiptap wraps it in a more ergonomic API and an extension system so you can add or remove capabilities as needed. Over 100 first-party and community extensions exist, covering bold, italic, tables, images, code blocks, drag-and-drop block editing, mentions, and more. Because Tiptap is framework-agnostic, you can use it with React, Vue, or plain JavaScript. The document is internally represented as a structured tree (not raw HTML), which makes it reliable for saving, transforming, and rendering content. For real-time collaborative editing, multiple people writing in the same document simultaneously, Tiptap integrates with Hocuspocus, a companion open-source backend that uses CRDT (conflict-free replicated data type) technology via the Yjs library to merge edits without conflicts, similar to how Google Docs works. You would use Tiptap when building a document editor, note-taking app, CMS, or any interface where users need to write formatted content and the standard textarea is not enough. The tech stack is TypeScript, distributed as npm packages, with React and Vue adapters included.

Copy-paste prompts

Prompt 1
Show me how to set up Tiptap with React and add bold, italic, and heading formatting to a basic editor.
Prompt 2
How do I create a custom Tiptap extension to add a custom block type or formatting option?
Prompt 3
Walk me through integrating Hocuspocus with Tiptap to enable real-time collaborative editing in my app.
Prompt 4
How do I save and load Tiptap editor content as JSON and render it back into the editor?
Prompt 5
Show me how to add drag-and-drop block reordering to a Tiptap editor using the available extensions.
Open on GitHub → Explain another repo

Generated 2026-05-18 · Model: sonnet-4-6 · Verify against the repo before relying on details.