#Tiptap > Tiptap is the headless and extensible rich-text editor framework tailored to modern web and app development needs. Core Benefits - Build rich text editors similar to Notion within days - Supports React, Next, Vue, Svelte, JavaScript and many more - Robust, battle-tested open source framework under the MIT license - With over 100 extensions highly adaptable Key Features - Collaboration: Allow your users to collaborate in real time in any document - Comments: Integrate threaded conversations and suggestions in your editor experience - Content AI: Empower your users to create and transform text, images & documents with AI - Import / Export: Enable easy file conversions in your documents (e.g. DOCX, PDF, JSON, Markdown) - Documents: Manage structured documents in our cloud database or on your premises - Templates: Ready-made templates to quickly create complex editors like Notion, Google Docs or Slack - UI Components: Drop-in React components to build your editor UI faster, without the boilerplate Tailored Solutions - Enterprises that need a scalable editor framework with enterprise-grade security to accelerate time to market - Startups requiring rapid development of feature-rich applications to deliver exceptional user experiences Use Cases - Advanced WYSIWYG editors for SaaS platforms and apps - Real-time collaboration and team-focused editing tools - AI-powered content generation and editing ## Products - [Tiptap Rich Text Editor](https://tiptap.dev): Headless JavaScript framework to create advanced content editing experiences. - [Tiptap Collaboration](https://tiptap.dev/product/collaboration): Enable real-time collaborative editing in your documents. - [Tiptap Comments](https://tiptap.dev/product/comments): Integrate a commenting system into your rich text editor to enhance teamwork and real-time discussions. - [Tiptap Content AI](https://tiptap.dev/product/content-ai): Integrate AI into your editor for enhanced content creation, allowing users to generate text, images, and more. - [Tiptap Documents API](https://tiptap.dev/product/documents): Manage your editor documents with our API and webhooks. - [Tiptap Templates](https://tiptap.dev/templates): Ready-to-use editor templates designed for quick integration, e.g. the notion-like block editor template. - [Tiptap for Enterprises](https://tiptap.dev/enterprise): Enterprise-grade solutions for security and scalability. - [Tiptap Conversion](https://tiptap.dev/product/conversion): Discover how to seamlessly import and export DOCX, ODT and more to your editor, - [Tiptap UI Components](https://tiptap.dev/product/ui-components): Discover ready-made and uniquely designed UI components for creating user-friendly rich editor interfaces. ## Docs - [Tiptap Docs](https://tiptap.dev/docs): Tiptap provides a framework to create custom content editors with extensible features and cloud services. ### Editor Docs - [Getting started](https://tiptap.dev/docs/editor/getting-started/overview): Learn how to integrate the Tiptap Editor, a customizable rich text editor framework, into your projects. - [Install the Editor](https://tiptap.dev/docs/editor/getting-started/install): Integrate the Tiptap editor into your project with guides for various frameworks. - [React Integration Guide](https://tiptap.dev/docs/editor/getting-started/install/react): Learn how to integrate the Tiptap Editor with a React app and develop your custom editor experience. - [Next.js Integration](https://tiptap.dev/docs/editor/getting-started/install/nextjs): Learn how to integrate Tiptap with Next.js to create a versatile and powerful rich text editor for your project. - [Vue 2](https://tiptap.dev/docs/editor/getting-started/install/vue2): Learn how to set up Tiptap with Vue 2 for enhanced wysiwyg editing capabilities. - [Vue 3](https://tiptap.dev/docs/editor/getting-started/install/vue3): Learn how to set up Tiptap with Vue 3 for enhanced rich text editing through a detailed step-by-step guide. - [Svelte Integration with Tiptap](https://tiptap.dev/docs/editor/getting-started/install/svelte): Learn how to integrate Tiptap with your SvelteKit project through a step-by-step guide. - [Nuxt Integration with Tiptap](https://tiptap.dev/docs/editor/getting-started/install/nuxt): Learn how to set up the Tiptap Editor with Nuxt.js for a dynamic wysiwyg editing experience. - [Alpine Integration with Tiptap](https://tiptap.dev/docs/editor/getting-started/install/alpine): A guide on how to integrate Tiptap with Alpine.js to create a powerful rich text editor using Vite. - [CDN](https://tiptap.dev/docs/editor/getting-started/install/cdn): Learn how to use Tiptap via CDN for quick and easy setup in demos or tests. - [PHP](https://tiptap.dev/docs/editor/getting-started/install/php): Discover how to utilize Tiptap within PHP environments, including Laravel and Livewire. Access the guide in our docs! - [Vanilla JavaScript](https://tiptap.dev/docs/editor/getting-started/install/vanilla-javascript): Learn how to set up the Tiptap Editor with Vanilla JavaScript, install dependencies and initialize the editor. - [Configure the Editor](https://tiptap.dev/docs/editor/getting-started/configure): Learn how to set up your Tiptap Editor's elements, extensions, and content settings. - [Styling the Editor](https://tiptap.dev/docs/editor/getting-started/style-editor): Learn how to apply custom styles to your Tiptap editor using plain HTML, custom classes, or Tailwind CSS. - [Custom Menu](https://tiptap.dev/docs/editor/getting-started/style-editor/custom-menus): Learn how to develop a custom bubble or floating menu in your Tiptap editor. - [Tiptap Concepts](https://tiptap.dev/docs/editor/core-concepts/introduction): Explore the foundational elements of Tiptap's API, designed for intricate rich text editing based on ProseMirror's architecture. - [Keyboard Shortcuts in Tiptap](https://tiptap.dev/docs/editor/core-concepts/keyboard-shortcuts): Discover the predefined keyboard shortcuts for Tiptap and learn how to customize these shortcuts to fit your editing needs. - [Nodes and Marks](https://tiptap.dev/docs/editor/core-concepts/nodes-and-marks): Discover the different types of nodes in Tiptap, like paragraphs, headings, code blocks, and more. - [ProseMirror](https://tiptap.dev/docs/editor/core-concepts/prosemirror): Access the ProseMirror API and functionality with the Tiptap PM package while developing your editor. - [Tiptap Schemas](https://tiptap.dev/docs/editor/core-concepts/schema): Learn how content is structured in Tiptapâ€™s schema and control your nodes, marks, and more in your documents. - [Pro License](https://tiptap.dev/docs/resources/pro-license): Understand the licensing terms for Tiptap Pro extensions and what usage is permitted under each plan. - [Extensions](https://tiptap.dev/docs/editor/core-concepts/extensions): Learn how to create, customize, and integrate extensions into Tiptap to improve your text editor's functionality. ### Editor Extensions Docs - [Extensions](https://tiptap.dev/docs/editor/extensions/overview): Explore numerous editor extensions to enhance your Tiptap content experience. - [Custom extensions](https://tiptap.dev/docs/editor/extensions/custom-extensions): Learn how to customize and create extensions in Tiptap to enhance your editor with new features and functionalities. - [Create extensions](https://tiptap.dev/docs/editor/extensions/custom-extensions/create-new): Learn how to create a new extension for your Tiptap editor and build a unique editor experience from scratch. - [Extend extensions](https://tiptap.dev/docs/editor/extensions/custom-extensions/extend-existing): Learn how to extend existing extensions in Tiptap to add new features and functionalities to your editor. - [Node views](https://tiptap.dev/docs/editor/extensions/custom-extensions/node-views): Learn how to customize and create interactive nodes in your Tiptap editor for editable and non-editable content. - [Node view examples](https://tiptap.dev/docs/editor/extensions/custom-extensions/node-views/examples): Review customizable node view examples and create drag handles, dynamic tables of contents, and interactive drawing tools. - [JavaScript node views](https://tiptap.dev/docs/editor/extensions/custom-extensions/node-views/javascript): Learn how to create custom node views using Vanilla JavaScript in Tiptap, focusing on direct manipulation of node properties and interactive content. - [Node views with React](https://tiptap.dev/docs/editor/extensions/custom-extensions/node-views/react): Learn how to use React components to create custom node views in Tiptap, enabling direct manipulation of node properties and interactive content. - [Node views with Vue](https://tiptap.dev/docs/editor/extensions/custom-extensions/node-views/vue): Learn how to use Vue to create custom node views in Tiptap, allowing direct manipulation of node properties and interactive content. - [Functionality extensions](https://tiptap.dev/docs/editor/extensions/functionality): Discover Tiptap's functionality extensions that enhance the editor with collaboration tools, text editing features, and more. - [Integrate AI Generation into your editor](https://tiptap.dev/docs/editor/extensions/functionality/ai-generation): Learn how to integrate AI-powered editor commands and content generation in Tiptap using the AI Generation extension. - [Integrate AI Suggestion into your editor](https://tiptap.dev/docs/editor/extensions/functionality/ai-suggestion): Learn how to integrate AI-powered proofreading and more into your editor using the AI Suggestion extension. - [BubbleMenu extension](https://tiptap.dev/docs/editor/extensions/functionality/bubble-menu): Add a contextual menu that appears near text selections in your Tiptap editor to apply various text marks. - [CharacterCount extension](https://tiptap.dev/docs/editor/extensions/functionality/character-count): Learn how to limit and count characters in your editor using the Character Count extension. - [Collaboration extension](https://tiptap.dev/docs/editor/extensions/functionality/collaboration): Learn how to set up and use collaborative editing with the Collaboration extension in Tiptap. - [Collaboration Cursor extension](https://tiptap.dev/docs/editor/extensions/functionality/collaboration-cursor): Learn how to use the Collaboration Cursor extension in Tiptap to show other users' cursors and their names while they type. - [Color extension](https://tiptap.dev/docs/editor/extensions/functionality/color): Add text color support to your Tiptap editor with the Color extension. - [Integrate Comments into your editor](https://tiptap.dev/docs/editor/extensions/functionality/comments): Learn how to integrate and manage comments within your editor using the Tiptap Comments extension, including creating threads and comments via REST API. - [Integrate AI into your editor](https://tiptap.dev/docs/editor/extensions/functionality/content-ai): Learn how to integrate AI-powered editor commands and content generation using the Content AI extension in Tiptap. - [Drag Handle extension](https://tiptap.dev/docs/editor/extensions/functionality/drag-handle): Enable dragging nodes around your Tiptap Editor with the Drag Handle Extension. - [Drag Handle React extension](https://tiptap.dev/docs/editor/extensions/functionality/drag-handle-react): Learn how to enable dragging nodes in your React-based Tiptap Editor with the Drag Handle React Extension. - [Drag Handle VueeExtension](https://tiptap.dev/docs/editor/extensions/functionality/drag-handle-vue): Learn how to enable dragging nodes around your Vue-based Tiptap Editor with the Drag Handle Vue extension. - [Dropcursor extension](https://tiptap.dev/docs/editor/extensions/functionality/dropcursor): Add a cursor when dragging items inside the editor with the Dropcursor extension. - [Export extension](https://tiptap.dev/docs/editor/extensions/functionality/export): Export Tiptap's editor content to various formats like docx, odt, and markdown. - [FileHandler extension](https://tiptap.dev/docs/editor/extensions/functionality/filehandler): Learn how to handle file drops and pastes in your Tiptap editor with the FileHandler extension. - [FloatingMenu extension](https://tiptap.dev/docs/editor/extensions/functionality/floatingmenu): Use the Floating Menu extension in Tiptap to add a menu that appears on empty lines. - [Focus extension](https://tiptap.dev/docs/editor/extensions/functionality/focus): Learn how to use the Focus extension in Tiptap to track and highlight the cursor's position. - [FontFamily extension](https://tiptap.dev/docs/editor/extensions/functionality/fontfamily): Learn how to set custom font families in your Tiptap Editor using the Font Family extension. - [Gapcursor extension](https://tiptap.dev/docs/editor/extensions/functionality/gapcursor): Learn how to use the Gapcursor extension in Tiptap to prevent your cursor from getting stuck in areas that don't allow regular selection. - [Integrate Document History into your editor](https://tiptap.dev/docs/editor/extensions/functionality/history): Learn how to integrate and manage document revisions using the History extension in Tiptap, enabling tracking of changes and version control. - [Import extension](https://tiptap.dev/docs/editor/extensions/functionality/import): Learn how to import documents from various formats like docx, odt, and markdown into Tiptap's JSON format. - [InvisibleCharacters extension](https://tiptap.dev/docs/editor/extensions/functionality/invisiblecharacters): This extension allows users to see invisible characters like spaces, hard breaks, and paragraphs to enhance accessibility. - [List Keymap extension](https://tiptap.dev/docs/editor/extensions/functionality/listkeymap): Learn how to modify default backspace and delete behavior for lists in Tiptap with the List Keymap extension. - [Mathematics extension](https://tiptap.dev/docs/editor/extensions/functionality/mathematics): This extension allows users to write and visualize mathematical formulas via LaTeX. - [Placeholder extension](https://tiptap.dev/docs/editor/extensions/functionality/placeholder): Configure a helpful placeholder to fill the emptiness in your Tiptap editor. - [Snapshot Compare extension](https://tiptap.dev/docs/editor/extensions/functionality/snapshot-compare): Visualize changes between two document versions, highlighting differences and edits made. - [StarterKit extension](https://tiptap.dev/docs/editor/extensions/functionality/starterkit): Discover all the popular extensions bundled in the StarterKit, perfect for getting started with Tiptap. - [Table of Contents extension](https://tiptap.dev/docs/editor/extensions/functionality/table-of-contents): Learn how to integrate a list of anchors into your document and manage a Table of Contents (TOC) effectively. - [TextAlign extension](https://tiptap.dev/docs/editor/extensions/functionality/textalign): Learn how to use the TextAlign extension to align text in various ways like left, center, right, or justify in your Tiptap editor. - [Typography extension](https://tiptap.dev/docs/editor/extensions/functionality/typography): Replace common text patterns with typographic characters using the typography extension in your Tiptap editor. - [Undo/Redo extension](https://tiptap.dev/docs/editor/extensions/functionality/undo-redo): Learn how to implement undo and redo functionality in your Tiptap Editor to easily revert or reapply edits. - [UniqueID extension](https://tiptap.dev/docs/editor/extensions/functionality/uniqueid): Add a unique ID to every single node and keep track of them with the UniqueID extension. - [Mark extensions](https://tiptap.dev/docs/editor/extensions/marks): Learn about mark extensions like bold, code, link, and more to improve your usersâ€™ text editor experience in Tiptap. - [Bold extension](https://tiptap.dev/docs/editor/extensions/marks/bold): Use the Bold extension in Tiptap to make your text bold and let it stand out. - [Code extension](https://tiptap.dev/docs/editor/extensions/marks/code): Learn how to use the Code extension in your Tiptap Editor to add inline code to your texts. - [Highlight extension](https://tiptap.dev/docs/editor/extensions/marks/highlight): Learn how to use the Highlight extension in Tiptap Editor to add colorful text highlights. - [Italic extension](https://tiptap.dev/docs/editor/extensions/marks/italic): Use the Italic extension in your Tiptap Editor to emphasize your text with italics. - [Link extension](https://tiptap.dev/docs/editor/extensions/marks/link): Learn how to use the Link extension in Tiptap to add support for tags. - [Strike extension](https://tiptap.dev/docs/editor/extensions/marks/strike): Learn how to use the Strike extension in Tiptap to cut through the words you wrote if you're too afraid to delete it. - [Subscript extension](https://tiptap.dev/docs/editor/extensions/marks/subscript): Learn how to use the Subscript extension in Tiptap to write slightly below the normal line and show your unique style. - [Superscript extension](https://tiptap.dev/docs/editor/extensions/marks/superscript): Use the Superscript extension in Tiptap to write text above the normal line. - [TextStyle extension](https://tiptap.dev/docs/editor/extensions/marks/text-style): Learn how to use the Text Style extension in Tiptap to add tags with custom styles. - [Underline extension](https://tiptap.dev/docs/editor/extensions/marks/underline): Learn how to render text as underlined in Tiptap, including installation and usage details. - [Nodes extensions](https://tiptap.dev/docs/editor/extensions/nodes): Discover the different types of nodes in Tiptap, like paragraphs, headings, code blocks, and more. - [Blockquote extension](https://tiptap.dev/docs/editor/extensions/nodes/blockquote): Use the Blockquote extension in Tiptap to enable the quote HTML tag in the editor. - [BulletList extension](https://tiptap.dev/docs/editor/extensions/nodes/bullet-list): Use the Bullet list extension to enable bullet lists in your Tiptap Editor. - [CodeBlock extension](https://tiptap.dev/docs/editor/extensions/nodes/code-block): Learn how to use the CodeBlock extension in Tiptap to add fenced code blocks to your documents. - [CodeBlockLowlight extension](https://tiptap.dev/docs/editor/extensions/nodes/code-block-lowlight): Learn how to use the CodeBlockLowlight extension to add code blocks with syntax highlighting to your documents. - [Details extension](https://tiptap.dev/docs/editor/extensions/nodes/details): Learn how to use the Details extension in Tiptap to enable the

HTML tag for showing and hiding content. - [DetailsContent extension](https://tiptap.dev/docs/editor/extensions/nodes/details-content): Learn how to use the Details and DetailsContent extensions in your Tiptap Editor to show and hide content effectively. - [DetailsSummary extension](https://tiptap.dev/docs/editor/extensions/nodes/details-summary): Learn how to use the DetailsSummary extension to enable the `

` content in Tiptap. - [Document extension](https://tiptap.dev/docs/editor/extensions/nodes/document): Learn about the required Document extension, which serves as the home for all nodes in Tiptap editors. - [Emoji extension](https://tiptap.dev/docs/editor/extensions/nodes/emoji): Use the Emoji extension in Tiptap to render emojis as inline nodes with fallback images for unsupported emojis. - [HardBreak extension](https://tiptap.dev/docs/editor/extensions/nodes/hard-break): Use the Hard Break extension in Tiptap to add support for the
HTML tag for line breaks. - [Heading extension](https://tiptap.dev/docs/editor/extensions/nodes/heading): Learn how to use the Heading extension in Tiptap to support headings of different levels with HTML tags. - [Horizontal Rule extension](https://tiptap.dev/docs/editor/extensions/nodes/horizontal-rule): Use the Horizontal Rule extension in Tiptap to render the `

` HTML tag for separating content. - [Image extension](https://tiptap.dev/docs/editor/extensions/nodes/image): Learn how to use the Image extension in Tiptap to render HTML tags for adding images to your documents. - [ListItem extension](https://tiptap.dev/docs/editor/extensions/nodes/list-item): Use the List Item extension in Tiptap to add support for the `

` tag used in bullet and ordered lists. - [Mention extension](https://tiptap.dev/docs/editor/extensions/nodes/mention): Learn how to use the Mention extension in Tiptap to mention other users with a suggestion popup. - [Ordered List extension](https://tiptap.dev/docs/editor/extensions/nodes/ordered-list): Learn how to use the Ordered List extension in Tiptap to create ordered lists rendered as

HTML tag. - [Table extension](https://tiptap.dev/docs/editor/extensions/nodes/table): Use the Table extension in Tiptap to add tables to your documents with a range of customization options. - [TableCell extension](https://tiptap.dev/docs/editor/extensions/nodes/table-cell): Use the Table Cell extension in Tiptap to add cells to your tables for proper data structure. - [TableHeader extension](https://tiptap.dev/docs/editor/extensions/nodes/table-header): Improve tables with Tiptapâ€™s TableHeader extension. - [TableRow extension](https://tiptap.dev/docs/editor/extensions/nodes/table-row): Use the Table Row extension in Tiptap to add rows to your tables for a better table structure. - [TaskItem extension](https://tiptap.dev/docs/editor/extensions/nodes/task-item): Use the TaskItem extension to add support for task items rendered as

with checkboxes. - [TaskList extension](https://tiptap.dev/docs/editor/extensions/nodes/task-list): Learn how to use the Task List extension in Tiptap to create task lists rendered as