tiptap
Originally fromjezweb/claude-skills
Installation
SKILL.md
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 |