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