# Editor Rich Text Tiptap

Rich text editor with a toolbar, slash commands and mentions for notes, comments or documents.

- id: `editor-rich-text-tiptap`
- Page: https://agentic-ui-kit.com/components/editor-rich-text-tiptap
- Live preview: https://agentic-ui-kit.com/live/component/editor-rich-text-tiptap?piece=editor-rich-text-tiptap

## Install

```bash
agentic-ui add editor-rich-text-tiptap
npx shadcn@4.17.0 add @agentic-ui/editor-rich-text-tiptap
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** rich-text-editing, tiptap, formatting-toolbar, roving-tabindex-toolbar, bubble-menu, slash-commands, mentions, links, image-upload-data-url, tables, markdown-export, read-only-mode, dark-mode
- **Intents:** create-edit, communicate
- **Suits domains:** notes, knowledge, saas, project-management, marketing
- **Interaction:** typing, keyboard-navigation, selection, file-pick
- **Screen role:** detail
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** rich text editor with a toolbar, slash commands and mentions for notes, comments or documents, Tiptap editor in React with bubble menu, links, images, tables and Markdown export, WYSIWYG editor that exports Markdown and lets users insert blocks by typing a slash, block based editor input for a knowledge base or release notes form
- **Avoid when:** a full document workspace with outline, templates and export formats (use docs-editor-shell), multi-user cursors and real-time sync (use collab-live-cursors and a sync layer), code editing with syntax highlighting (use editor-code-codemirror), a one-line or plain textarea field
- **Preserve when adapting:** toolbar-roving-tabindex, safe-link-schemes, image-type-and-size-limits, server-rendered-fallback
- **Replace when adapting:** initial-content, mention-people, toolbar-items, slash-items
- **Adaptation effort:** medium
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, input
- **npm dependencies:** @tiptap/core, @tiptap/react, @tiptap/pm, @tiptap/starter-kit, @tiptap/extensions, @tiptap/extension-image, @tiptap/extension-mention, @tiptap/extension-table, @tiptap/suggestion, lucide-react
- **npm dependencies (registry):** @tiptap/core@^3.0.0, @tiptap/extension-image@^3.0.0, @tiptap/extension-mention@^3.0.0, @tiptap/extension-table@^3.0.0, @tiptap/extensions@^3.0.0, @tiptap/pm@^3.0.0, @tiptap/react@^3.24.0, @tiptap/starter-kit@^3.24.0, @tiptap/suggestion@^3.0.0, lucide-react@0.577.0
- **Registry dependencies:** lib-primitives