Tiptap Rich Text Editor

Build headless rich-text editors with Tiptap. Configures the ProseMirror-based editor, custom extensions and nodes, slash commands, bubble/floating menus, collaborative editing, and clean HTML/JSON output you fully style.

This skill helps you create editors with Tiptap. It sets up the React editor with StarterKit, adds and authors custom extensions, nodes, and marks, builds bubble and floating toolbars and slash-command menus, wires collaborative editing with Yjs, controls serialization to HTML/JSON, and handles images, mentions, and code blocks — a headless foundation you style to match your product.

When to use

Use when a product needs a real rich-text or block editor — comments, docs, CMS bodies, or Notion-style editing — with custom nodes, menus, or real-time collaboration and full control over markup.

Examples

Editor with bubble menu

Formatting toolbar on selection

Set up a Tiptap editor with StarterKit and a bubble menu offering bold, italic, link, and heading controls, outputting clean HTML on change

Custom slash command

Notion-style insert menu

Add a slash-command extension to Tiptap that opens a menu to insert headings, bullet lists, code blocks, and images