Installation
npx skills add oakoss/agent-skills --skill tiptap 45
Installs
Tiptap Rich Text Editor
Overview
Tiptap is a headless rich text editor built on ProseMirror, providing a modular extension system for React applications. It supports React 19, Tailwind v4, and SSR frameworks like Next.js. Use when building blog editors, comment systems, documentation tools, or Notion-like collaborative apps. Do NOT use with Create React App (CRA is incompatible with Tiptap v3 ESM module structure; use Vite instead).
Quick Reference
| Pattern | API / Key Point |
|---|---|
| Create editor | useEditor({ extensions: [StarterKit], immediatelyRender: false }) |
| Render editor | <EditorContent editor={editor} /> |
| Prose styling | Add className="prose dark:prose-invert max-w-none" to container |
| Configure StarterKit | StarterKit.configure({ heading: { levels: [1, 2, 3] } }) |
| Disable undo/redo | StarterKit.configure({ undoRedo: false }) (required for Y.js collab) |
| Image upload | Set allowBase64: false, use upload handler with URL replacement |
| Markdown support | import { Markdown } from '@tiptap/markdown' (official, open-source) |
| shadcn component | npx shadcn@latest add https://raw.githubusercontent.com/Aslam97/shadcn-minimal-tiptap/main/registry/block-registry.json |
| Null guard | useEditor() returns Editor | null — guard before calling methods |
Core Dependencies
| Package | Purpose |
|---|---|
@tiptap/react |
React integration (React 19 supported since v2.10.0) |
@tiptap/starter-kit |
Bundled extensions: marks, nodes, and functionality |
@tiptap/pm |
ProseMirror peer dependency (required, not auto-installed) |
@tailwindcss/typography |
Prose styling for headings, lists, links |
StarterKit v3 Contents
| Category | Included |
|---|---|
| Marks | Bold, Italic, Strike, Code, Link (v3), Underline (v3) |
| Nodes | Document, Paragraph, Text, Heading, BulletList, OrderedList, ListItem, Blockquote, CodeBlock, HorizontalRule, HardBreak |
| Functionality | Undo/Redo, Dropcursor, Gapcursor, ListKeymap (v3), TrailingNode (v3) |
Common Additional Extensions
| Extension | Package | Use Case |
|---|---|---|
| Image | @tiptap/extension-image |
Image support with resize |
| Color | @tiptap/extension-color |
Text color (requires TextStyle) |
| Typography | @tiptap/extension-typography |
Smart quotes, dashes, ellipsis |
| Placeholder | @tiptap/extension-placeholder |
Placeholder text (requires CSS) |
| Table | @tiptap/extension-table |
Table support (+ Row, Cell, Header) |
| TaskList | @tiptap/extension-task-list |
Checkbox task lists |
| CodeBlockLowlight | @tiptap/extension-code-block-lowlight |
Syntax-highlighted code |
| Collaboration | @tiptap/extension-collaboration |
Real-time multi-user editing (Y.js) |
| Markdown | @tiptap/markdown |
Bidirectional markdown (open-source) |
Common Mistakes
| Mistake | Fix |
|---|---|
Missing immediatelyRender: false |
Add to useEditor() config — required for SSR/Next.js |
No prose classes on editor container |
Add className="prose prose-sm dark:prose-invert max-w-none" |
| Images stored as base64 | Set allowBase64: false, use upload handler with URL replacement |
| Using EditorProvider + useEditor together | Choose one — EditorProvider wraps useEditor internally |
| Undo/Redo enabled with Collaboration | Set undoRedo: false in StarterKit when using Y.js |
| ProseMirror version conflicts | Add resolutions for prosemirror-model/view/state in package.json |
| Using Create React App | Switch to Vite — CRA incompatible with v3 ESM modules |
Not checking editor for null |
useEditor() returns Editor | null — guard before use |
Using history: false for collab |
Config key renamed to undoRedo in v3 |
Importing @tiptap/extension-markdown |
Correct package is @tiptap/markdown |
Delegation
- Tailwind styling: see
tailwindskill - Form integration: see
tanstack-formskill
References
Installs
Security Audit
View Source
oakoss/agent-skills
More from this source
EU-Hosted Inference API Power your AI Agents with
the best open-source models.
Drop-in OpenAI-compatible API. No data leaves Europe.
Explore Inference APIGLM
GLM 5
$1.00 / $3.20
per M tokens
Kimi
Kimi K2.5
$0.60 / $2.80
per M tokens
MiniMax
MiniMax M2.5
$0.30 / $1.20
per M tokens
Qwen
Qwen3.5 122B
$0.40 / $3.00
per M tokens
How to use this skill
Install tiptap by running npx skills add oakoss/agent-skills --skill tiptap in your project directory. Run the install command above in your project directory. The skill file will be downloaded from GitHub and placed in your project.
No configuration needed. Your AI agent (Claude Code, Cursor, Windsurf, etc.) automatically detects installed skills and uses them as context when generating code.
The skill enhances your agent's understanding of tiptap, helping it follow established patterns, avoid common mistakes, and produce production-ready output.
What you get
Skills are plain-text instruction files — not executable code. They encode expert knowledge about frameworks, languages, or tools that your AI agent reads to improve its output. This means zero runtime overhead, no dependency conflicts, and full transparency: you can read and review every instruction before installing.
Compatibility
This skill works with any AI coding agent that supports the skills.sh format, including Claude Code (Anthropic), Cursor, Windsurf, Cline, Aider, and other tools that read project-level context files. Skills are framework-agnostic at the transport level — the content inside determines which language or framework it applies to.
Made in Europe Chat with 100+ AI Models in one App.
Use Claude, ChatGPT, Gemini alongside with EU-Hosted Models like Deepseek, GLM-5, Kimi K2.5 and many more.
