Tiptap — Headless Rich Text Editor Framework

What it is

Tiptap is a headless rich text editor framework built on top of ProseMirror. It provides the editing logic -- content model, input rules, keyboard shortcuts, collaboration -- while letting you build your own UI. It works with React, Vue, Svelte, and vanilla JavaScript. Extensions add features like tables, mentions, code blocks, and AI autocompletion.

It targets developers building content management systems, documentation tools, email composers, and AI-powered writing interfaces that need full control over the editor's appearance and behavior.

How it saves time or tokens

Tiptap gives you a production-ready editing engine without building one from scratch. ProseMirror is powerful but low-level; Tiptap wraps it with a developer-friendly API and extension system. For AI applications, the extension architecture lets you add AI-powered features (autocomplete, rewriting, summarization) as plugins without modifying the core editor.

How to use

1. Install for React:

npm install @tiptap/core @tiptap/pm @tiptap/starter-kit @tiptap/react

1. Create a basic editor:

import { useEditor, EditorContent } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';

function MyEditor() {
    const editor = useEditor({
        extensions: [StarterKit],
        content: '<p>Start writing...</p>'
    });
    
    return <EditorContent editor={editor} />;
}

1. Add a toolbar:

function Toolbar({ editor }) {
    return (
        <div>
            <button onClick={() => editor.chain().focus().toggleBold().run()}>Bold</button>
            <button onClick={() => editor.chain().focus().toggleItalic().run()}>Italic</button>
            <button onClick={() => editor.chain().focus().toggleCodeBlock().run()}>Code</button>
        </div>
    );
}

Example

import { useEditor, EditorContent } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import Placeholder from '@tiptap/extension-placeholder';
import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight';

function AIEditor() {
    const editor = useEditor({
        extensions: [
            StarterKit,
            Placeholder.configure({ placeholder: 'Start writing or press / for AI...' }),
            CodeBlockLowlight.configure({ lowlight })
        ],
        content: '',
        onUpdate: ({ editor }) => {
            console.log('Content:', editor.getJSON());
        }
    });
    
    const insertAIText = async () => {
        const selected = editor.state.doc.textBetween(
            editor.state.selection.from,
            editor.state.selection.to
        );
        // Call your AI API to rewrite/expand the selected text
        const improved = await aiRewrite(selected);
        editor.chain().focus().insertContent(improved).run();
    };
    
    return (
        <div>
            <button onClick={insertAIText}>AI Rewrite</button>
            <EditorContent editor={editor} />
        </div>
    );
}

Related on TokRepo

• AI tools for content -- Content creation and editing tools
• AI tools for coding -- Developer tools and frameworks

Common pitfalls

• Tiptap is headless, meaning you must build or style the toolbar UI yourself. The starter kit provides editing logic but no default toolbar component.
• ProseMirror's document model has a learning curve. Custom node types and marks require understanding the schema system.
• Real-time collaboration requires a backend (Hocuspocus or Y.js provider). The collaboration extension does not work without a WebSocket server.