DOCSEARCHbyAlgolia
Submit Docs

Tiptap Editor Documentation

website·Indexed 40 days ago

https://tiptap.dev/

A headless editor framework that is open source (MIT). Tiptap provides tools for building custom rich-text editors with support for collaboration, AI toolkits, and extensions. The documentation includes guides on accessibility, performance, and migration from other editors such as CKEditor, Draft.js, Lexical, Quill, Slate, and TinyMCE.

Tokens
489.8K
Snippets
2.5K
Records
3.2K
Agent score
73%

What's inside Tiptap

  1. Overview of Tiptap collaboration runtime configuration

    Tiptap allows you to dynamically adjust collaboration settings in your document server using a REST API. This enables the modification of secrets, webhook URLs, and other environment configurations in real-time to adapt to security protocols or project requirements without needing to restart the application.

  2. Overview of Tiptap Decorations

    Decorations allow you to add view-only highlights, search results, annotations, and widgets to the editor. Crucially, decorations only change how content looks; they do not modify the document itself and are not persisted in JSON or HTML output. Use decorations for temporary UI markers or visual cues, and use Node Views when the content must be part of the document structure.

  3. Overview of Layout Participants in Tiptap Pages

    Layout participants allow custom NodeViews and extensions to integrate with the Tiptap Pages layout cycle. This is essential for content that needs to know its position relative to page boundaries, such as blocks that must not be split by a page break, embeds with dynamic heights, or overlays aligned to page edges.

    The layout cycle works in document order: Pages calls each participant's callback sequentially. If a participant reports a change, the cycle repeats from the top to ensure subsequent participants can measure updated positions. This continues until no changes are reported, after which headers, footers, and page gaps are redrawn.

  4. Overview of Tiptap AI Agent built-in tools

    The Tiptap AI Agent extension includes several built-in tools that allow the AI model to interact with and edit rich text documents:

    • read_first_chunk: Starts reading the document from the beginning.
    • read_next_chunk: Reads the next chunk of the document.
    • read_previous_chunk: Reads the previous chunk of the document.
    • apply_diff: The primary tool for making changes. It applies a list of diffs, where each diff specifies the content before the change (for location), the content to delete, and the content to insert.
    • replace_document: Replaces the entire document content.
    • plan: Generates a list of work steps in Markdown format.
    • ask_user: Allows the agent to ask the user a question.
    • finish_with_summary: Completes the task and provides a Markdown summary.

  5. Overview of PageKit extension

    PageKit is a convenience extension that bundles Pages, TableKit (pagination-safe tables), and PageBreak into a single registration. By default, only Pages and PageBreak are registered; TableKit is opt-in and must be enabled via the configuration object. PageKit requires ConvertKit to be installed separately to handle the editor's node and mark schema.

  6. Overview of Hocuspocus collaboration suite

    Hocuspocus is a suite of tools designed to bring real-time collaboration to applications. It is built on top of Y.js, a Conflict-free Replication Data Type (CRDT) that merges changes from multiple users without conflicts, regardless of the order in which changes are applied. This architecture supports real-time synchronization, offline-first application development, and awareness state syncing.

  7. Overview of Tiptap AI Toolkit capabilities

    The AI Toolkit provides an interactive AI agent capable of reading, editing, and manipulating documents within a Tiptap editor. Key capabilities include:

    Document Operations:

    • Reading: Efficiently analyzes document content in chunks to handle large files.
    • Editing: Performs precise edits on specific sections without needing to replace the entire document content.
    • Inserting: Supports streaming content directly into the editor.
    • Suggestions: Implements a review workflow where AI-generated changes can be accepted or rejected.

    Advanced Features:

    • Schema Awareness: The AI recognizes and understands custom nodes and marks defined in the document schema.
    • Selection-Aware Prompts: AI operations can be scoped to either the currently selected text or the entire document.
    • Change Tracking: Provides a Google Docs-style workflow for tracking and managing AI edits.

  8. Overview of Custom Markdown Tokenizers in Tiptap

    Custom tokenizers allow developers to extend the Tiptap Markdown parser to support non-standard or custom syntax (e.g., ++inserted text++, :::note blocks, or shortcodes). Tokenizers are registered with MarkedJS and run during the lexing phase, converting a Markdown string into tokens before Tiptap's parse handlers transform those tokens into Tiptap JSON.

  9. Overview of ResizableNodeView

    ResizableNodeView is a ProseMirror/Tiptap-compatible NodeView that wraps an HTMLElement (such as an image, iframe, or video) in a container and wrapper to provide configurable resize handles. It manages user interaction, applies min/max constraints, optionally preserves aspect ratio, and provides callbacks for live updates and final dimension commits. While active, it adds a data-resize-state attribute and an optional resizing CSS class to the element.

  10. Overview of Tiptap AI Toolkit tool definitions

    The Tiptap AI Toolkit provides a set of tool definitions that enable AI agents to read, edit, and navigate document content. These definitions are compatible with popular AI provider libraries including Vercel AI SDK, LangChain.js, OpenAI, Anthropic, and Mastra. When an AI agent generates a tool call based on these definitions, the call must be executed using the executeTool method.
    // Example: Executing a tool call to read the document from the beginning
await agent.executeTool({
  toolName: 'tiptapRead',
  // Pass the AI-generated tool input
  input: { from: 0 },
})

  11. Overview of Tiptap Document Conversion

    Tiptap Conversion is a Pro package that acts as a bridge between external document formats and the Tiptap JSON document model. It supports synchronous processing of imports and exports. It is not a document renderer, a real-time collaborative editor, an OCR tool, or an asynchronous job queue.

    Supported Formats:

    • Import: DOCX, Markdown
    • Export: DOCX, PDF, ODT, EPUB, Markdown, DOC (legacy)

    Conversion can be integrated via editor extensions (for in-editor commands) or via a REST API (for server-side or headless use).

  12. Overview of Tiptap AI Agents

    AI agents built with the Tiptap AI Toolkit can interact with their environment to accomplish complex tasks. Unlike simple workflows, agents can choose from a set of tools to read, edit, and comment on documents. Key capabilities include building conversational chatbots, implementing review systems for AI-generated changes, streaming tool calls in real-time, managing comments, editing multiple documents simultaneously, and providing the AI with awareness of editor selections and custom schemas (nodes, marks, and attributes).