| Decide if Tiptap is right for my project |
Tiptap Overview |
You need to choose a rich text editor framework for a React/Next.js application or headless CMS integration. |
| Compare Tiptap vs Lexical vs Slate |
Editor Comparison |
You need to make an informed decision between Tiptap, Lexical, and Slate based on specific project requirements. |
| Install Tiptap in a Next.js project |
Installation |
You need to install Tiptap in a JavaScript/TypeScript project. |
| Set up the editor with React |
React Integration |
You're integrating Tiptap into a React or Next.js application. |
| Avoid SSR hydration errors in Next.js |
React Integration, Next.js Setup |
You're integrating Tiptap into a React or Next.js application. |
| Understand the ProseMirror foundation |
ProseMirror Foundation |
You need to understand Tiptap's underlying architecture to build custom extensions or debug complex issues. |
| Define custom document schemas |
Schema Architecture |
You need to define or customize the document structure rules (which nodes can contain which children, which marks are allowed). |
| Configure the editor instance |
Editor Configuration |
You need to configure editor instance behavior, initial content, autofocus, editability, or event handlers. |
| Choose content format (HTML vs JSON) |
Content Formats |
You need to decide how to store, retrieve, or transfer editor content. |
| Add paragraph, heading, and other content nodes |
Document Structure Nodes, Content Nodes |
You need the foundational nodes required for any Tiptap document: Document, Paragraph, Text. |
| Add images and media nodes |
Media Nodes |
You need images, tables, code blocks, or other rich content types. |
| Add bold, italic, and basic marks |
Basic Mark Extensions |
You need inline text formatting: bold, italic, underline, strikethrough. |
| Add link marks |
Link Mark Extension |
You need hyperlinks with URL validation and target control. |
| Add advanced marks (highlight, code) |
Advanced Mark Extensions |
You need background highlighting, text colors, font sizes, or custom text styling. |
| Enable history, placeholder, character count |
StarterKit Extensions, Utility Extensions |
You need a complete set of common extensions without installing each individually. |
| Add dropCursor, gapCursor |
UI Extensions |
You need context-aware UI elements: selection menus, slash commands, or floating toolbars. |
| Work with history and undo/redo |
History Extension |
You need undo/redo functionality for user edits. |
| Create a custom extension |
Custom Extension Architecture |
You need to create a new extension type (node, mark, or functionality) not provided by built-in extensions. |
| Add markdown-style input rules |
Input Rules |
You need Markdown-style shortcuts (e.g., **bold** converts to bold) or custom paste handling. |
| Create custom node views with React |
Node Views |
You need custom DOM rendering for a node: interactive widgets, React components, or complex layouts. |
| Execute editor commands |
Commands API |
You need to programmatically modify editor content, selection, or state. |
| Create custom commands |
Custom Commands |
You need to create reusable command logic for your extensions or application. |
| Handle editor events (onUpdate, onFocus) |
Editor Events |
You need to react to editor state changes: content updates, selection changes, focus/blur, etc. |
| Optimize event handling |
Event Optimization |
You need to optimize expensive operations triggered by editor events (auto-save, API calls, analytics). |
| Store content as HTML or JSON |
Serialization Patterns |
You need to export editor content to different formats, transform content, or integrate with external systems. |
| Build a bubble menu |
Bubble Menu |
You need a selection-based menu (appears on text selection) or context menu (right-click). |
| Build a floating menu |
Floating Menu |
You need a menu that appears in empty blocks or triggered by / (slash commands). |
| Build a toolbar |
Toolbar |
You need a persistent toolbar (always visible, not context-dependent). |
| Integrate with Next.js App Router |
Next.js Setup |
You're integrating Tiptap into a Next.js application (App Router or Pages Router). |
| Handle Next.js API routes |
Next.js API Integration |
You need to save/load Tiptap content via Next.js API routes. |
| Connect to Drupal JSON API |
Drupal JSON API |
You're building a decoupled Drupal frontend with Next.js and need to edit Drupal content via Tiptap. |
| Enable collaborative editing with Y.js |
Collaboration Architecture |
You need real-time collaborative editing (multiple users editing simultaneously, like Google Docs). |
| Set up Hocuspocus collaboration server |
Hocuspocus Server |
You're self-hosting collaborative editing with Y.js and need a WebSocket server. |
| Style the editor with CSS |
Styling Approach |
You need to style the editor content, UI elements, or integrate with a design system. |
| Implement dark mode |
Dark Mode |
You need to support light and dark themes. |
| Optimize React performance |
React Performance |
Your editor re-renders too frequently, causing lag or poor UX. |
| Optimize NodeView performance |
NodeView Performance |
You have React node views and experiencing performance issues. |
| Prevent XSS attacks |
Security Model |
You're storing or displaying user-generated content from Tiptap. |
| Test custom extensions |
Testing Strategy |
You're building custom extensions or complex editor logic and need automated tests. |
| Avoid common mistakes |
Anti-Patterns |
You need to avoid common pitfalls and bad practices. |
| Find code examples and references |
Code Reference |
You need quick reference to key Tiptap packages, classes, and imports. |
| Access official documentation |
Sources and Maintenance |
|