tiptap

# 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

```bash
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/pm` is required peer dependency (ProseMirror engine)
- StarterKit bundles 20+ essential extensions (headings, lists, bold, italic, etc.)
- Image/color/typography are common additions not in StarterKit

**Important**: If using Tiptap v3.14.0+, drag handle functionality requires minimum v3.14.0 (regression fixed in that release). For Pro extensions with drag handles, React 18 is recommended due to tippyjs-react dependency.

### 2. Create SSR-Safe Editor

```typescript
import { useEditor, EditorContent } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'

export function Editor() {
  const editor = useEditor({
    extensions: [StarterKit],
    content: '<p>Hello World!</p>',
    immediatelyRender: false, // ⚠️ CRITICAL for SSR/Next.js
    editorProps: {
      attributes: {
        class: 'prose prose-sm focus:outline-none min-h-[200px] p-4',
      },
    },
  })

  return <EditorContent editor={editor} />
}
```

**CRITICAL:**
- **Always set `immediatelyRender: false`** for Next.js/SSR apps (prevents hydration mismatch)
- Without this, you'll see: "SSR has been detected, please set `immediatelyRender` explicitly to `false`"
- This is the #1 error reported by Tiptap users

### 3. Add Tailwind Typography (Optional but Recommended)

```bash
npm install @tailwindcss/typography
```

Update your `tailwind.config.ts`:
```typescript
import typography from '@tailwindcss/typography'

export default {
  plugins: [typography],
}
```

**Why thi