Tiptap Development Expert

Expert guidance for building rich text editors with Tiptap - a headless, framework-agnostic editor built on ProseMirror.

See also: tiptap-editor skill — VMark-specific Tiptap API patterns (commands, node traversal, selection handling). Use tiptap-dev for general Tiptap/ProseMirror development, and tiptap-editor for VMark-specific editor integration.

When to Use This Skill

• Creating custom nodes, marks, or extensions for Tiptap

• Implementing input rules or paste rules

• Working with the Tiptap commands API

• Building React integrations with useEditor

• Extending existing extensions

• Creating custom node views

• Understanding the schema and content model

Reference Files

File Description

references/extensions.md

Extension types (Node, Mark, Extension), creation patterns

references/commands-and-api.md

Commands API, editor API, chaining

references/input-paste-rules.md

Input rules and paste rules

references/react-integration.md

React-specific hooks and components

references/schema.md

Schema properties, content patterns

references/examples.md

Complete working examples

Quick Reference

Extension Types

// Functionality extension (no schema) Extension.create({ name: 'myExtension', addKeyboardShortcuts() { ... } })

// Node extension (block content) Node.create({ name: 'myNode', group: 'block', content: 'inline*' })

// Mark extension (inline formatting) Mark.create({ name: 'myMark', parseHTML() { ... }, renderHTML() { ... } })

Command Chaining

editor.chain().focus().toggleBold().run() editor.can().chain().focus().toggleBold().run() // dry run

React Integration

const editor = useEditor({ extensions: [StarterKit], content: '<p>Hello</p>', immediatelyRender: false, // for SSR })

Core Concepts

• Headless Architecture: Tiptap provides logic, you control rendering

• Extension-Based: Everything is an extension (nodes, marks, functionality)

• ProseMirror Foundation: Built on ProseMirror, full access to its APIs

• Schema-Driven: Content model defined by node/mark schemas

• Command Pattern: All operations via chainable commands