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 runReact 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