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

:

' Hello '

,

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

安装