Tiptap — Headless Rich Text Editor Framework

Tiptap Architecture

Headless = Full Control

Tiptap (logic layer)
  ├─ Document model (ProseMirror)
  ├─ Extensions (100+)
  ├─ Commands & keyboard shortcuts
  └─ Event system

Your UI (presentation layer)
  ├─ Custom toolbar
  ├─ Custom bubble menu
  ├─ Custom floating menu
  └─ Your design system

Extensions (100+)

Custom Extensions

import { Extension } from '@tiptap/core';

const MyExtension = Extension.create({
    name: 'myExtension',
    addCommands() {
        return {
            insertAIBlock: () => ({ commands }) => {
                return commands.insertContent({
                    type: 'aiBlock',
                    content: [{ type: 'text', text: 'AI generated...' }],
                });
            },
        };
    },
});

Real-Time Collaboration

import Collaboration from '@tiptap/extension-collaboration';
import CollaborationCursor from '@tiptap/extension-collaboration-cursor';
import * as Y from 'yjs';
import { WebsocketProvider } from 'y-websocket';

const ydoc = new Y.Doc();
const provider = new WebsocketProvider('ws://localhost:1234', 'doc-id', ydoc);

const editor = useEditor({
    extensions: [
        StarterKit.configure({ history: false }),
        Collaboration.configure({ document: ydoc }),
        CollaborationCursor.configure({ provider }),
    ],
});

Framework Adapters

# React
npm install @tiptap/react

# Vue
npm install @tiptap/vue-3

# Svelte
npm install @tiptap/svelte

# Angular
npm install @tiptap/angular

FAQ

Q: What is Tiptap? A: Tiptap is a headless rich text editor framework with 36,000+ GitHub stars built on ProseMirror. 100+ extensions, framework adapters for React/Vue/Svelte/Angular, and full UI control.

Q: How is Tiptap different from Quill or Slate? A: Tiptap is headless (you control the UI), built on ProseMirror (proven document model), and has the largest extension ecosystem (100+). Quill is opinionated with a fixed UI. Slate gives lower-level control but requires more work.

Q: Is Tiptap free? A: The core library is open-source under MIT. Tiptap also offers paid extensions (collaboration server, AI features) and a cloud service.