DOCSEARCHbyAlgolia
Submit Docs

Tiptap

repository·main·Indexed 13 days ago

https://github.com/ueberdosis/tiptap

A headless, framework-agnostic rich text editor built on ProseMirror. Tiptap provides logic and state management through an extension-based architecture, allowing developers to build custom user interfaces for Vue, React, or plain JavaScript. It includes a wide array of extensions for functionality such as collaboration, AI toolkits, and various text formatting options.

Tokens
152.8K
Snippets
480
Records
568
Agent score
98%

What's inside Tiptap

  1. What is the Tiptap Editor?

    main

    Tiptap is a headless, framework-agnostic rich text editor built on top of ProseMirror.

    Key characteristics include:

    • Headless: It does not provide a built-in user interface, giving you full design freedom to build your own UI.
    • Framework-agnostic: It can be integrated into various frontend frameworks like Vue, React, or plain JavaScript.
    • Extension-based: Functionality is added through extensions, allowing you to customize everything from basic text styling to advanced features like drag-and-drop block editing.
    • Customizable: You can define your own custom extensions and nodes to tailor the user experience.

  2. Overview of @tiptap/html

    main
    @tiptap/html is part of the Tiptap ecosystem, which serves as a headless wrapper around ProseMirror. ProseMirror is a toolkit for building rich text WYSIWYG editors used by organizations like The New York Times, The Guardian, and Atlassian. Tiptap provides a more developer-friendly abstraction over the ProseMirror engine.

  3. Overview of Advanced Tiptap Features

    main

    Tiptap supports several advanced feature sets through specific extensions and documentation guides:

    • Comments: Thread-based inline and document comments using the Comments extension.
    • Tracked Changes: Ability to track, accept, and reject document edits.
    • Import/Export: Conversion between document formats like DOCX, PDF, and Markdown.
    • AI Capabilities:
      • AI Content Generation: Inserting text via AI workflows.
      • AI Agent Editing: Allowing AI agents to edit documents.
      • AI Review/Proofreading: Suggesting style improvements and proofreading.
      • Server-side AI: Running AI workflows on the server.
    • Version Control:
      • Version History: Saving and restoring document snapshots.
      • Snapshot Compare: Highlighting differences between versions.
    • Pages: Implementing print-ready layouts with headers, footers, and page breaks.

  4. What is @tiptap/core?

    main
    Tiptap is a headless wrapper around ProseMirror, a toolkit for building rich text WYSIWYG editors. Because it is 'headless', Tiptap provides the logic and state management for the editor without enforcing a specific UI, allowing developers to build their own custom user interfaces and integrate the editor into any framework (like Vue, React, or plain JavaScript).

  6. Introduction to @tiptap/ai-toolkit

    main
    @tiptap/ai-toolkit is part of the Tiptap ecosystem, which is a headless wrapper around ProseMirror. ProseMirror is a toolkit used for building rich text WYSIWYG editors. This toolkit allows developers to build highly customizable editor experiences by leveraging the power of ProseMirror while providing a more developer-friendly interface.

  7. Use @tiptap/extension-ruby-text for CJK reading guides

    main
    The @tiptap/extension-ruby-text package provides support for HTML <ruby> elements within the Tiptap editor. This is used to add reading guides (furigana) for Chinese, Japanese, and Korean (CJK) text. Note that this extension is specifically for HTML ruby text and is unrelated to the Ruby programming language.

  8. Use Tiptap with React via @tiptap/react

    main
    Tiptap is a headless wrapper around ProseMirror, designed for building rich text WYSIWYG editors. The @tiptap/react package provides the necessary integration to use Tiptap within React applications. Because it is 'headless', Tiptap does not provide a default UI; you are responsible for building the editor's interface and styling using your own React components.

  9. Use @tiptap/vue-3 for Vue 3 applications

    main
    Tiptap is a headless wrapper around ProseMirror, a toolkit for building rich text WYSIWYG editors. The @tiptap/vue-3 package provides the official integration for Vue 3, allowing you to build highly customizable editors within the Vue ecosystem.

  10. Use Tiptap with Vue 2

    main
    Tiptap is a headless wrapper around ProseMirror, designed for building rich text WYSIWYG editors. The @tiptap/vue-2 package provides the necessary integration to use Tiptap within Vue 2 applications. Because it is 'headless', Tiptap does not provide built-in UI components; you are responsible for building the editor's interface (menus, buttons, etc.) and styling it, while Tiptap manages the document state and logic.

  11. Identify Tiptap package scopes for installation

    main

    Tiptap is organized into several scopes within its monorepo. When installing dependencies, you should choose packages based on whether you need the core editor, specific framework bindings (React, Vue), or individual extensions.

    Core and Framework Bindings

    Use these scopes for the editor engine, framework integration, and utility tools:

    • @tiptap/core: The main editor engine.
    • @tiptap/react: React framework bindings.
    • @tiptap/vue-3: Vue 3 framework bindings.
    • @tiptap/vue-2: Vue 2 framework bindings.
    • @tiptap/starter-kit: A collection of commonly used extensions.
    • @tiptap/ai-toolkit: AI-powered editor capabilities.
    • @tiptap/html: HTML parsing and rendering utilities.
    • @tiptap/markdown: Markdown parsing and rendering utilities.
    • @tiptap/static-renderer: Tools for rendering content without a browser.

    Extensions

    Extensions are scoped individually. To add a specific feature (like bold text or images), install the corresponding package:

    • @tiptap/extension-bold
    • @tiptap/extension-italic
    • @tiptap/extension-link
    • @tiptap/extension-image
    • @tiptap/extension-table
    • @tiptap/extension-bubble-menu
    • @tiptap/extension-floating-menu
    • @tiptap/extension-collaboration

  12. What is the @tiptap/pm package?

    main

    The @tiptap/pm package is a convenience wrapper that re-exports all ProseMirror packages required by Tiptap under a single, consistent version range.

    Instead of manually installing and managing multiple individual ProseMirror dependencies (which can lead to version mismatch errors), you can use @tiptap/pm to ensure all ProseMirror components used by Tiptap are perfectly aligned and compatible.