mcpField
T
tiptap-dev

tiptap-dev

github.com/xiaolaiDevelopment87879 installsUpdated today
Repository

About tiptap-dev

A general development skill for building rich-text editors with Tiptap. It covers extensions, commands, schemas, and React integration, with ProseMirror APIs available as its foundation.

Key features

  1. 01Create nodes, marks, and extensions
  2. 02Configure input and paste rules
  3. 03Use chainable editor commands
  4. 04Integrate React with useEditor
  5. 05Work with schemas and content models

Use cases

  1. 01Add custom nodes or formatting to an editor
  2. 02Implement input and paste transformations
  3. 03Build a Tiptap editor in a React app
  4. 04Extend existing Tiptap extensions

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/xiaolai/vmark --skill tiptap-dev

After installing, type/tiptap-devin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/
commands-and-api.md
examples.md
extensions.md
input-paste-rules.md
react-integration.md
schema.md

Details

From the project README

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

FileDescription
references/extensions.mdExtension types (Node, Mark, Extension), creation patterns
references/commands-and-api.mdCommands API, editor API, chaining
references/input-paste-rules.mdInput rules and paste rules
references/react-integration.mdReact-specific hooks and components
references/schema.mdSchema properties, content patterns
references/examples.mdComplete 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

Comments

Markdown supported