How do I install the Tiptap Dev skill?

Run npx skillmds@latest add tomevault-io/tiptap-dev in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Tiptap Dev safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Tiptap Dev?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Tiptap Dev free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Tiptap Dev?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Tiptap Dev by tomevault-io — Agent Skill

Name: Tiptap Dev
Author: tomevault-io

Tiptap Dev

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. Use when this capability is needed.

tomevault-io Updated Sep 17, 2026

File contents

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

Converted and distributed by TomeVault — claim your Tome and manage your conversions.

---name: tiptap-devdescription: 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. Use when this capability is needed.---# Tiptap Development ExpertExpert 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```typescript// 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```typescripteditor.chain().focus().toggleBold().run()editor.can().chain().focus().toggleBold().run() // dry run```### React Integration```typescriptconst editor = useEditor({ extensions: [StarterKit], content: '<p>Hello</p>', immediatelyRender: false, // for SSR})```## Core Concepts1. **Headless Architecture**: Tiptap provides logic, you control rendering2. **Extension-Based**: Everything is an extension (nodes, marks, functionality)3. **ProseMirror Foundation**: Built on ProseMirror, full access to its APIs4. **Schema-Driven**: Content model defined by node/mark schemas5. **Command Pattern**: All operations via chainable commands---> Converted and distributed by [TomeVault](https://tomevault.io/claim/xiaolai) — claim your Tome and manage your conversions.

Frequently asked questions