tiptap-dev

name	tiptap-dev
description	Expert guidance for building rich text editors with Tiptap - a headless, framework-agnostic editor built on ProseMirror. Use when 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, or creating custom node views.

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

1. Headless Architecture: Tiptap provides logic, you control rendering
2. Extension-Based: Everything is an extension (nodes, marks, functionality)
3. ProseMirror Foundation: Built on ProseMirror, full access to its APIs
4. Schema-Driven: Content model defined by node/mark schemas
5. Command Pattern: All operations via chainable commands