tiptap
Installation
Summary
Headless rich text editor framework for React with SSR safety, image uploads, and collaborative editing support.
- Requires
immediatelyRender: falsein Next.js/SSR apps to prevent hydration mismatches; this is the #1 setup error - Includes StarterKit bundle (20+ extensions) plus optional Image, Link, Markdown, Collaboration, and Typography extensions
- Supports three integration patterns: shadcn minimal-tiptap component, custom React hooks, or headless API with ProseMirror
- Prevents 7 documented issues including base64 image bloat, ProseMirror version conflicts, and Create React App incompatibility
SKILL.md
Tiptap Rich Text Editor
Status: Production Ready Last Updated: 2026-01-21 Dependencies: React 19+, Tailwind v4, shadcn/ui (recommended) Latest Versions: @tiptap/react@3.16.0, @tiptap/starter-kit@3.16.0, @tiptap/pm@3.16.0 (verified 2026-01-21)
Quick Start (5 Minutes)
1. Install Dependencies
npm install @tiptap/react @tiptap/starter-kit @tiptap/pm @tiptap/extension-image @tiptap/extension-color @tiptap/extension-text-style @tiptap/extension-typography
Why this matters:
@tiptap/pmis required peer dependency (ProseMirror engine)
Related skills
More from jezweb/claude-skills
tailwind-v4-shadcn
|
2.7Ktanstack-query
|
2.5Kshadcn-ui
Install and configure shadcn/ui components for React projects. Guides component selection, installation order, dependency management, customisation with semantic tokens, and common UI recipes (forms, data tables, navigation, modals). Use after tailwind-theme-builder has set up the theme infrastructure, when adding components, building forms, creating data tables, or setting up navigation.
2.5Ktailwind-theme-builder
>
2.2Kfastapi
|
2.0Kcolor-palette
>
1.9K