#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 core - 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) - Documents: Manage structured documents in our cloud database or on your premises - Templates: Use pre-built React templates to quickly create complex editors like Notion or Slack 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): 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 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. ## 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. - [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 `` HTML tag for your `
` 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 tags. - [Paragraph extension](https://tiptap.dev/docs/editor/extensions/nodes/paragraph): Use the Paragraph extension in Tiptap to add support for paragraphs with the

      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

    1. 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
        . - [Text extension](https://tiptap.dev/docs/editor/extensions/nodes/text): Enable plain text support in your Tiptap editor with the Text extension. - [Youtube extension](https://tiptap.dev/docs/editor/extensions/nodes/youtube): Use the Youtube extension in Tiptap to easily embed Youtube videos in your documents. ### Editor API Docs - [Editor commands](https://tiptap.dev/docs/editor/api/commands): Learn about command execution and chaining in Tiptap, and discover how to extend functionalities. - [Content commands](https://tiptap.dev/docs/editor/api/commands/content): Learn about the clearContent, insertContent, insertContentAt, and setContent commands to efficiently manage content in Tiptap. - [clearContent command](https://tiptap.dev/docs/editor/api/commands/content/clear-content): Learn how to delete all content in the editor using the clearContent command in Tiptap. - [Cut command](https://tiptap.dev/docs/editor/api/commands/content/cut): Learn how to use the cut command in Tiptap to cut out content from a range and place it at a specified position. - [insertContent command](https://tiptap.dev/docs/editor/api/commands/content/insert-content): Use the insertContent command in Tiptap to add content to the document using plain text, HTML, or JSON. - [insertContentAt command](https://tiptap.dev/docs/editor/api/commands/content/insert-content-at): Learn how to insert content at a specific position or range using plain text, HTML, or JSON with the insertContentAt command. - [setContent command](https://tiptap.dev/docs/editor/api/commands/content/set-content): Replace the document with a new one using JSON or HTML with the setContent command. - [forEach command](https://tiptap.dev/docs/editor/api/commands/for-each): Use the forEach command in Tiptap to loop through an array of items and insert content into the editor. - [List commands](https://tiptap.dev/docs/editor/api/commands/lists): Discover essential commands in Tiptap for managing lists, including creating, updating, and manipulating list structures. - [liftListItem command](https://tiptap.dev/docs/editor/api/commands/lists/lift-list-item): Learn how to use the liftListItem command in Tiptap to lift the list item into a wrapping parent list. - [sinkListItem command](https://tiptap.dev/docs/editor/api/commands/lists/sink-list-item): Learn how to use the sinkListItem command in Tiptap to sink the list item into a wrapping child list. - [splitListItem command](https://tiptap.dev/docs/editor/api/commands/lists/split-list-item): Learn how to use the splitListItem command in Tiptap to split one list item into two separate list items. - [toggleList command](https://tiptap.dev/docs/editor/api/commands/lists/toggle-list): Use the toggleList command in Tiptap to toggle between different types of lists. - [wrapInList command](https://tiptap.dev/docs/editor/api/commands/lists/wrap-in-list): Use the wrapInList command in Tiptap to wrap a node in the current selection in a list. - [Nodes and Marks commands](https://tiptap.dev/docs/editor/api/commands/nodes-and-marks): Learn to use commands for managing nodes and marks in Tiptap, including creating, manipulating, and cleaning up nodes and marks. - [clearNodes command](https://tiptap.dev/docs/editor/api/commands/nodes-and-marks/clear-nodes): Use the clearNodes command in Tiptap to normalize all nodes in the document to the default paragraph node. - [createParagraphNear command](https://tiptap.dev/docs/editor/api/commands/nodes-and-marks/create-paragraph-near): Learn how to use the createParagraphNear command in Tiptap to add paragraphs adjacent to the current block node selection. - [deleteNode command](https://tiptap.dev/docs/editor/api/commands/nodes-and-marks/delete-node): Use the deleteNode command in Tiptap to selectively remove nodes from your document. - [exitCode command](https://tiptap.dev/docs/editor/api/commands/nodes-and-marks/exit-code): Learn how to use the exitCode command in Tiptap to exit code blocks and continue editing in a new default block. - [extendMarkRange command](https://tiptap.dev/docs/editor/api/commands/nodes-and-marks/extend-mark-range): Use the extendMarkRange command in Tiptap to expand the current selection to include the specified mark. - [joinBackward command](https://tiptap.dev/docs/editor/api/commands/nodes-and-marks/join-backward): Join two nodes backwards from the current selection in your Tiptap Editor with the joinBackward command. - [joinDown command](https://tiptap.dev/docs/editor/api/commands/nodes-and-marks/join-down): Learn how to use the joinDown command in Tiptap to join the selected block with the sibling below it. - [joinForward command](https://tiptap.dev/docs/editor/api/commands/nodes-and-marks/join-forward): Learn how to join two nodes forwards from the current selection in the Tiptap Editor with the joinForward command. - [joinTextblockBackward command](https://tiptap.dev/docs/editor/api/commands/nodes-and-marks/join-textblock-backward): Learn how to use the joinTextblockBackward command in Tiptap to join the current textblock to the one before it. - [joinTextblockForward command](https://tiptap.dev/docs/editor/api/commands/nodes-and-marks/join-textblock-forward): Use the joinTextblockForward command in Tiptap to join the current textblock to the one after it. - [joinUp command](https://tiptap.dev/docs/editor/api/commands/nodes-and-marks/join-up): Use the joinUp command in Tiptap to join the selected block with the sibling above it. - [Lift command](https://tiptap.dev/docs/editor/api/commands/nodes-and-marks/lift): Learn how to lift a node up into its parent node in your Tiptap Editor using the lift command. - [liftEmptyBlock command](https://tiptap.dev/docs/editor/api/commands/nodes-and-marks/lift-empty-block): Learn how to lift the currently selected empty textblock in your Tiptap Editor with the liftEmptyBlock command. - [newlineInCode command](https://tiptap.dev/docs/editor/api/commands/nodes-and-marks/newline-in-code): Use the newlineInCode command in Tiptap to insert a new line in the current code block. - [resetAttributes command](https://tiptap.dev/docs/editor/api/commands/nodes-and-marks/reset-attributes): Use the resetAttributes command in Tiptap to reset a node's attributes to their default values. - [setMark command](https://tiptap.dev/docs/editor/api/commands/nodes-and-marks/set-mark): Use the setMark command in Tiptap to add a new mark at the current selection - [setNode command](https://tiptap.dev/docs/editor/api/commands/nodes-and-marks/set-node): Learn how to use the setNode command in Tiptap to replace a given range with a specified text block node. - [splitBlock command](https://tiptap.dev/docs/editor/api/commands/nodes-and-marks/split-block): Use the splitBlock command in Tiptap to split the current node into two at the current NodeSelection. - [toggleMark command](https://tiptap.dev/docs/editor/api/commands/nodes-and-marks/toggle-mark): Learn how to use the toggleMark command in Tiptap to toggle a specific mark on and off at the current selection. - [toggleNode command](https://tiptap.dev/docs/editor/api/commands/nodes-and-marks/toggle-node): Learn how to use the toggleNode command in your Tiptap Editor to toggle one node with another. - [toggleWrap command](https://tiptap.dev/docs/editor/api/commands/nodes-and-marks/toggle-wrap): Learn how to use the toggleWrap command in Tiptap to wrap the current node with a new node or remove a wrapping node. - [undoInputRule command](https://tiptap.dev/docs/editor/api/commands/nodes-and-marks/undo-input-rule): Learn how to use the undoInputRule command in Tiptap to undo the most recent input rule that was triggered. - [unsetAllMarks command](https://tiptap.dev/docs/editor/api/commands/nodes-and-marks/unset-all-marks): Use the unsetAllMarks command in Tiptap to remove all marks from the current selection. - [unsetMark command](https://tiptap.dev/docs/editor/api/commands/nodes-and-marks/unset-mark): Learn how to use the unsetMark command in Tiptap to remove a specific mark from the current or across a selection. - [updateAttributes command](https://tiptap.dev/docs/editor/api/commands/nodes-and-marks/update-attributes): Learn how to use the updateAttributes command in Tiptap to set new attribute values for a node or mark. - [selectTextblockEnd command](https://tiptap.dev/docs/editor/api/commands/select-textblock-end): Learn how to use the selectTextblockEnd command in Tiptap to move the cursor to the end of the current textblock. - [selectTextblockStart command](https://tiptap.dev/docs/editor/api/commands/select-textblock-start): Use the selectTextblockStart command in Tiptap to move the cursor to the start of the current textblock. - [Selection commands](https://tiptap.dev/docs/editor/api/commands/selection): Discover how to manage selections and focus in Tiptap Editor with commands like blur, focus, deleteSelection, and more. - [Blur command](https://tiptap.dev/docs/editor/api/commands/selection/blur): Understand the functionality of the blur command in Tiptap, which removes focus from the editor. - [deleteRange command](https://tiptap.dev/docs/editor/api/commands/selection/delete-range): Use the deleteRange command in Tiptap to remove content within a specific range in your document. - [deleteSelection command](https://tiptap.dev/docs/editor/api/commands/selection/delete-selection): The deleteSelection command in Tiptap removes any nodes or content that are currently selected within the editor. - [Enter Command](https://tiptap.dev/docs/editor/api/commands/selection/enter): Learn how to use the enter command in Tiptap to trigger an enter key action for automated text entry and formatting. - [Focus Command](https://tiptap.dev/docs/editor/api/commands/selection/focus): Learn how to use the focus command in Tiptap to set the focus back to the editor at a specific position. - [keyboardShortcut command](https://tiptap.dev/docs/editor/api/commands/selection/keyboard-shortcut): Use the keyboardShortcut command in Tiptap to trigger a ShortcutEvent with a given name. - [scrollIntoView command](https://tiptap.dev/docs/editor/api/commands/selection/scroll-into-view): Use the scrollIntoView command in Tiptap to scroll the view to the current selection or cursor position. - [selectAll command](https://tiptap.dev/docs/editor/api/commands/selection/select-all): Use the selectAll command in your Tiptap Editor to select the whole document at once. - [selectNodeBackward command](https://tiptap.dev/docs/editor/api/commands/selection/select-node-backward): Learn how to use the selectNodeBackward command in Tiptap to select the node before the current textblock. - [selectNodeForward command](https://tiptap.dev/docs/editor/api/commands/selection/select-node-forward): Use the selectNodeForward command in Tiptap to select the node after the current textblock if the selection is empty. - [selectParentNode command](https://tiptap.dev/docs/editor/api/commands/selection/select-parent-node): Use the selectParentNode command in Tiptap to move the selection to the parent node. - [setNodeSelection command](https://tiptap.dev/docs/editor/api/commands/selection/set-node-selection): Use the setNodeSelection command in Tiptap to create a new NodeSelection at a given position. - [setTextSelection command](https://tiptap.dev/docs/editor/api/commands/selection/set-text-selection): Use the setTextSelection command to control and set text selection to a specified range or position. - [setMeta command](https://tiptap.dev/docs/editor/api/commands/set-meta): Learn how to use the setMeta command in Tiptap to store a metadata property in the current transaction. - [Editor Instance API](https://tiptap.dev/docs/editor/api/editor): Learn how to use the Editor instance in Tiptap, including methods, settings, and functionalities for creating a rich text editing experience. - [Events in Tiptap](https://tiptap.dev/docs/editor/api/events): Learn to use and handle various events in Tiptap, including creation, updates, focus, blur, and destruction. - [Node Positions](https://tiptap.dev/docs/editor/api/node-positions): Learn about Node Positions in Tiptap for document navigation and manipulation. - [Tiptap utilities](https://tiptap.dev/docs/editor/api/utilities): Discover Tiptap Utilities that enhance the Editor API, offering tools for improved interaction and content management. - [HTML utility](https://tiptap.dev/docs/editor/api/utilities/html): Learn how to use the HTML Utility to render JSON as HTML and convert HTML to JSON without an editor instance. - [Suggestion utility](https://tiptap.dev/docs/editor/api/utilities/suggestion): Customize autocomplete suggestions using nodes like Mention and Emoji. - [Tiptap for PHP utility](https://tiptap.dev/docs/editor/api/utilities/tiptap-for-php): A PHP package for transforming Tiptap-compatible JSON to HTML and modifying content. ### Collaboration Docs - [Collaboration Overview](https://tiptap.dev/docs/collaboration/getting-started/overview): Learn how to make your text editor collaborative with Tiptap Collaboration, enabling features like real-time editing and asynchronous updates. - [Install Collaboration](https://tiptap.dev/docs/collaboration/getting-started/install): Set up collaborative editing in your Tiptap Editor by following this installation guide. - [Awareness in Collaboration](https://tiptap.dev/docs/collaboration/core-concepts/awareness): Learn how to integrate real-time user activity tracking in Tiptap Collaboration, including user presence and cursor positions. - [Webhooks](https://tiptap.dev/docs/collaboration/core-concepts/webhooks): Set up and understand webhook payloads, and manage settings to integrate advanced features. - [Documents in Collaboration](https://tiptap.dev/docs/collaboration/documents): Learn how to store, manage, and track documents using Tiptap Collaboration with REST API and webhooks for real-time updates. - [Inject content API](https://tiptap.dev/docs/collaboration/documents/content-injection): Manage your Collaboration documents with JSON updates using the Inject Content API. - [Document Conversion API](https://tiptap.dev/docs/collaboration/documents/conversion): Learn how to convert documents from DOCX, ODT, or Markdown to Tiptap's JSON format using the Document Conversion API. - [History extension](https://tiptap.dev/docs/collaboration/documents/history): Learn how to set up and use document version history for manual and automatic versioning in Tiptap. - [REST API | Tiptap Collaboration Docs](https://tiptap.dev/docs/collaboration/documents/rest-api): Manage your Tiptap documents programmatically with the Collaboration Management API. - [Semantic Search](https://tiptap.dev/docs/collaboration/documents/semantic-search): Discover how to implement AI-native search capabilities in your document library to enhance content discovery with contextual understanding. - [Snapshot Compare extension](https://tiptap.dev/docs/collaboration/documents/snapshot-compare): Compare snapshots of your documents to see changes made between two versions. - [Auth Guide](https://tiptap.dev/docs/collaboration/getting-started/authenticate): Secure and manage access in your collaborative editor with JWTs, covering setup, testing, and production integration. - [Runtime configuration](https://tiptap.dev/docs/collaboration/operations/configure): Learn how to dynamically adjust collaboration settings in your Tiptap app using straightforward API calls. - [Metrics](https://tiptap.dev/docs/collaboration/operations/metrics): Access real-time server and document statistics for your Tiptap Collaboration application. - [Provider events](https://tiptap.dev/docs/collaboration/provider/events): Learn how to use event listeners with Tiptap Collaboration providers to manage real-time states and changes effectively. - [Integrate the Collaboration provider](https://tiptap.dev/docs/collaboration/provider/integration): Set up and configure the Collaboration provider to manage real-time document synchronization across users. ### Comments Docs - [Comments Overview](https://tiptap.dev/docs/comments/getting-started/overview): Learn how to integrate and manage comments in your Tiptap editor, including features like threads and REST API access. - [Install Comments](https://tiptap.dev/docs/comments/getting-started/install): Learn how to install the comments extension in Tiptap to enable threaded discussions in your editor. - [Comments editor commands](https://tiptap.dev/docs/comments/integrate/editor-commands): Learn how to use editor commands to manage comments and threads in your Tiptap Editor. - [Comments REST API](https://tiptap.dev/docs/comments/integrate/rest-api): Manage comment threads and comments from outside the Tiptap Editor using the REST API. - [Webhook in Comments](https://tiptap.dev/docs/comments/integrate/webhook): Enable and manage webhooks for Comments in Tiptap to receive notifications on thread and comment activities. - [Configure Comments](https://tiptap.dev/docs/comments/core-concepts/configure): Learn how to set up the TiptapCollabProvider and customize thread classes in your Tiptap editor. - [Manage threads](https://tiptap.dev/docs/comments/core-concepts/manage-threads): Learn how to integrate and manage discussions in Tiptap Editor using threads and comments with editor commands. - [Style threads](https://tiptap.dev/docs/comments/core-concepts/style-threads): Learn how to style and manage thread visibility in your Tiptap editor using CSS decoration classes for inline and block threads. ### Content AI Docs - [Getting Started with Content AI](https://tiptap.dev/docs/content-ai/getting-started/overview): Integrate AI features into your editor like smart autocompletion, image generation, and more. - [Configure Content AI](https://tiptap.dev/docs/content-ai/getting-started/configure): Learn how to configure the Tiptap Content AI extension in your editor and explore its various settings. - [Install Content AI](https://tiptap.dev/docs/content-ai/getting-started/install): Set up Tiptap Content AI in your editor, including configuring OpenAI keys and JWT authentication. - [Image generation editor command](https://tiptap.dev/docs/content-ai/capabilities/image-generation): Learn how to use the aiImagePrompt command in Tiptap Content AI to generate images within your editor using various OpenAI models. - [Autocompletion in Content AI](https://tiptap.dev/docs/content-ai/capabilities/text-generation/autocompletion): Set up your Content AI extension to autocomplete and stream text when a user hits tab in your editor. - [Content AI Editor Commands](https://tiptap.dev/docs/content-ai/capabilities/text-generation/built-in-commands): Integrate AI into your Tiptap Editor to access preconfigured commands for text manipulation and image generation. - [Custom commands | Tiptap Content AI](https://tiptap.dev/docs/content-ai/capabilities/text-generation/custom-commands): Extend the AI extension to create a custom editor commands and prompts for your Tiptap editor. - [Formatted AI responses](https://tiptap.dev/docs/content-ai/capabilities/text-generation/format): Learn how to enable AI to automatically format generated content in your Tiptap editor with rich text, lists, and more. - [Manage responses](https://tiptap.dev/docs/content-ai/capabilities/text-generation/manage-responses): Learn how to use the Content AI storage to save, regenerate, and insert AI responses into your Tiptap editor. - [Provide Context to Your Prompts](https://tiptap.dev/docs/content-ai/capabilities/text-generation/provide-context): Learn how to give additional context to your AI prompts and editor commands to improve response relevance. - [Stream Content Command](https://tiptap.dev/docs/content-ai/capabilities/text-generation/stream): Learn about the low-level API for streaming content directly into the editor, supporting appending and replacing content. - [Integrate a custom LLM](https://tiptap.dev/docs/content-ai/custom-llms/integrate): Learn how to implement custom LLMs with Tiptap's advanced AI extension and override resolver functions in your editor. - [Content AI Privacy](https://tiptap.dev/docs/content-ai/resources/privacy): Understand how Tiptap Content AI prioritizes user privacy with cloud integration and on-premise options. ### Examples - [Examples Overview](https://tiptap.dev/docs/examples): Discover a variety of code examples that demonstrate how to use Tiptap for custom content editing and integration. - [Clever Editor example](https://tiptap.dev/docs/examples/advanced/clever-editor): Discover how to create highly customized extensions for your text editor using Tiptap. - [Collaborative editing example](https://tiptap.dev/docs/examples/advanced/collaborative-editing): Learn how to create a simple collaborative text editor in Tiptap with a short code example. - [Drawing example](https://tiptap.dev/docs/examples/advanced/drawing): Learn how to create a text editor with drawing capabilities using Tiptap with an easy code example. - [Forced content structure example](https://tiptap.dev/docs/examples/advanced/forced-content-structure): Learn how to add a text editor with a forced content structure using Tiptap. - [Interactive React & Vue views](https://tiptap.dev/docs/examples/advanced/interactive-react-and-vue-views): Learn how to build a text editor with React or Vue support using Tiptap. - [Mentions example](https://tiptap.dev/docs/examples/advanced/mentions): Learn how to build a text editor with mentions in Tiptap with a quick code example. - [Menus example](https://tiptap.dev/docs/examples/advanced/menus): Learn how to create floating menus for your text editor in Tiptap with a short code example. - [React rendering performance demo](https://tiptap.dev/docs/examples/advanced/react-performance): Learn how to integrate Tiptap with React and improve the rendering performance of your editor. - [Retrieval-Augmented Generation (RAG)](https://tiptap.dev/docs/examples/advanced/retrieval-augmented-generation-rag): Learn how to use Tiptap Semantic Search to retrieve context for your Tiptap AI commands. - [Syntax Highlighting Example](https://tiptap.dev/docs/examples/advanced/syntax-highlighting): Learn how to create code blocks with syntax highlighting using Tiptap and the CodeBlockLowlight extension. - [Default text editor example](https://tiptap.dev/docs/examples/basics/default-text-editor): Learn how to create a super basic text editor in Tiptap with a short code example. - [Formatting example](https://tiptap.dev/docs/examples/basics/formatting): Learn how to create a text editor with text formatting in Tiptap with an easy code example. - [Images example](https://tiptap.dev/docs/examples/basics/images): Learn how to create a text editor supporting images in Tiptap with a short code example. - [Long texts example](https://tiptap.dev/docs/examples/basics/long-texts): Learn how to create a text editor supporting large content with Tiptap with an easy example. - [Markdown shortcuts example](https://tiptap.dev/docs/examples/basics/markdown-shortcuts): Learn how to create a text editor with Markdown shortcuts using Tiptap with an easy code example. - [Minimal setup for paragraphs & text only](https://tiptap.dev/docs/examples/basics/minimal-setup): Learn how to create a very minimal text editor in Tiptap with a short code example. - [Adding table support to Tiptap](https://tiptap.dev/docs/examples/basics/tables): Learn how to create a text editor supporting tables in Tiptap with a quick code example. - [Tasks example](https://tiptap.dev/docs/examples/basics/tasks): Learn how to create a text editor supporting task lists with Tiptap with an easy code example. - [Collaborative fields](https://tiptap.dev/docs/examples/experiments/collaborative-fields): Learn how to save different content on one collaboration document with Tiptap Editor. - [Figure Extension](https://tiptap.dev/docs/examples/experiments/figure): Learn how to use the Figure extension in Tiptap to add figure nodes to your editor content. - [Generic figure example](https://tiptap.dev/docs/examples/experiments/generic-figure): Learn how to create a generic figure extension for your Tiptap Editor with an easy example. - [iFrame Extension](https://tiptap.dev/docs/examples/experiments/iframe): Learn how to use the iFrame extension in Tiptap to embed iframes in your editor content. - [Linting example](https://tiptap.dev/docs/examples/experiments/linting): Learn how to add a content linter to your Tiptap Editor with a short but sweet code example. - [Slash Commands Extension](https://tiptap.dev/docs/examples/experiments/slash-commands): Learn how to use the Slash Commands extension in Tiptap to add a toolbar that pops up at the slash position for quick content insertion. - [Trailing Node Extension](https://tiptap.dev/docs/examples/experiments/trailing-node): Use the Trailing node extension in Tiptap to add a node at the end of the document. ### Tiptap Guides - [Tiptap Guides Overview](https://tiptap.dev/docs/guides): Explore practical advice on configuring Tiptap editors, enhancing user experience, and ensuring accessibility. - [Accessibility](https://tiptap.dev/docs/guides/accessibility): Quick notes on ensuring accessibility by providing semantic markup, keyboard accessibility, and guidelines. - [JWT Authentication with Collaboration](https://tiptap.dev/docs/guides/authentication): Implement JWT authentication with Tiptap's collaboration and securely generate and manage JWTs server-side. - [Invalid Schema Handling](https://tiptap.dev/docs/guides/invalid-schema): Learn how to manage invalid schemas in Tiptap to maintain content integrity in collaborative editing environments. - [Name Documents](https://tiptap.dev/docs/guides/naming-documents): Learn best practices for naming and organizing documents in Tiptap Collaboration using unique identifiers and Y.js fragments. - [Offline Support](https://tiptap.dev/docs/guides/offline-support): Learn how to add offline functionality to your collaborative editor, enabling local data storage and automatic sync when online. - [Export to JSON and HTML](https://tiptap.dev/docs/guides/output-json-html): Manage content formats in Tiptap Editor and export to JSON and HTML, using Y.js for advanced features. - [Integration performance](https://tiptap.dev/docs/guides/performance): Learn how to integrate Tiptap Editor performantly in your app with tips to avoid re-rendering issues. - [Pro Extensions](https://tiptap.dev/docs/guides/pro-extensions): Learn how to install and use Tiptap Pro extensions, which enhance the Tiptap Editor with advanced features like versioning and AI-assisted content generation. - [Working with TypeScript](https://tiptap.dev/docs/guides/typescript): Learn how to extend and use TypeScript with the Tiptap Editor for enhanced development. - [Upgrade Tiptap V1 to V2](https://tiptap.dev/docs/guides/upgrade-tiptap-v1): A comprehensive guide on upgrading from Tiptap V1 to V2, covering installation, changes, and new features. ##Optional - [Tiptap Changelog](https://tiptap.dev/docs/resources/changelog): Tiptap consists of more than 50 separate packages. Here is everything you need to follow changes. - [System Status](https://status.tiptap.dev/) - [Contributing to Tiptap](https://tiptap.dev/docs/resources/contributing): Step-by-step guide for those interested in contributing to Tiptap, from setting up your development environment to tips for successful pull requests and creating your own extensions. - [Create your account](https://cloud.tiptap.dev/register): Sign up for a Tiptap account with no credit card required. - [Tiptap News](https://tiptap.dev/blog) - [GitHub](https://github.com/ueberdosis/tiptap) - [Discord](https://discord.com/invite/DDXcGKt4Zk) - [LinkedIn](https://www.linkedin.com/company/tiptapdev/) - [Bluesky](https://bsky.app/profile/tiptap.dev)