Tiptap

https://v2.tiptap.dev/docs
Admin
Tiptap is a headless, framework-agnostic rich text editor based on ProseMirror, offering an...
Tokens:285,678
Snippets:3,170
Trust Score:9.9
Update:4 months ago
Show doc for...
Tokens:
Raw
### Example: Add a Button Component

Source: https://v2.tiptap.dev/docs/ui-components/getting-started/cli

This example demonstrates how to use the `add` command to install a specific component, in this case, a 'button' component.

```bash
npx @tiptap/cli add button

```

--------------------------------

### Basic Tiptap Editor Setup

Source: https://v2.tiptap.dev/docs/guides/migrate-from-ckeditor4

Replace CKEditor 4 initialization with Tiptap's setup. This example shows the basic Tiptap editor configuration after installation.

```javascript
// CKEditor 4 (before)
CKEDITOR.replace('editor', {
  toolbar: [
    { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline'] },
    { name: 'paragraph', items: ['NumberedList', 'BulletedList'] },
    { name: 'links', items: ['Link', 'Unlink'] },
  ],
  height: 300,
})

// Tiptap (after)
import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'

const editor = new Editor({
  element: document.querySelector('#editor'),
  extensions: [StarterKit],
  content: '<p>Hello World!</p>',
})
```

--------------------------------

### Initialize Tiptap Editor

Source: https://v2.tiptap.dev/docs/guides/migrate-from-quill

Replace Quill initialization with Tiptap's. This example shows basic setup with the StarterKit extension and initial content.

```javascript
// Quill (before)
const quill = new Quill('#editor', {
  theme: 'snow',
  modules: {
    toolbar: [
      ['bold', 'italic', 'underline'],
      ['link', 'image'],
      [{ list: 'ordered' }, { list: 'bullet' }],
      [{ header: [1, 2, 3, false] }],
    ],
  },
})

// Tiptap (after)
import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'

const editor = new Editor({
  element: document.querySelector('#editor'),
  extensions: [StarterKit],
  content: '<p>Hello World!</p>',
})
```

--------------------------------

### Basic Provider Setup with React Hook

Source: https://v2.tiptap.dev/docs/collaboration/provider/integration

Connect to the Collaboration backend using TiptapCollabProvider. This example uses a useEffect hook for setup, suitable for React applications. Replace placeholders with your actual document ID, App ID, JWT, and user ID.

```javascript
const doc = new Y.Doc()

useEffect(() => {
  const provider = new TiptapCollabProvider({
    name: note.id, // Document identifier
    appId: 'YOUR_APP_ID', // replace with YOUR_APP_ID from Cloud dashboard
    token: 'YOUR_JWT', // Authentication token
    document: doc,
    user: userId,
  })
}, [])

```

--------------------------------

### Install Document Extension

Source: https://v2.tiptap.dev/docs/editor/extensions/nodes/document

Install the Document extension using npm. This is a required step for all Tiptap editor setups.

```bash
npm install @tiptap/extension-document

```

--------------------------------

### Install Dependencies

Source: https://v2.tiptap.dev/docs/resources/contributing

Install all necessary project dependencies after cloning the repository.

```bash
npm install
```

--------------------------------

### Install Collaboration Extension and Dependencies

Source: https://v2.tiptap.dev/docs/editor/extensions/functionality/collaboration

Install the Collaboration extension along with Yjs and its WebSocket provider. This is the initial setup step for enabling collaboration.

```bash
npm install @tiptap/extension-collaboration yjs y-websocket y-prosemirror

```

--------------------------------

### Full Tiptap Editor with AI Integration (React)

Source: https://v2.tiptap.dev/docs/content-ai/capabilities/generation/text-generation/manage-responses

This example demonstrates a complete Tiptap editor setup in React, including AI extension configuration, state management for chat responses, and rendering AI-generated content previews. It configures extensions like StarterKit, Table, and Placeholder, along with the Ai extension with necessary credentials and callbacks.

```javascript
import './styles.scss'

import Placeholder from '@tiptap/extension-placeholder'
import Table from '@tiptap/extension-table'
import TableCell from '@tiptap/extension-table-cell'
import TableHeader from '@tiptap/extension-table-header'
import TableRow from '@tiptap/extension-table-row'
import { EditorContent, useEditor } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
import Ai, { tryParseToTiptapHTML } from '@tiptap-pro/extension-ai'
import React, { useState } from 'react'

import { variables } from '../../../variables'

export default () => {
  const [chatResponse, setChatResponse] = useState(
    () => [
      'Give me a list of the features Tiptap has recently released.',
      'Make a simple browser compatibility table that has the columns "browser", "version", "compatible?" and a couple filler rows',
    ].sort(() => Math.random() - 0.5)[0],
  )
  const [currentIdx, setCurrentIdx] = useState(0)
  const [errorMessage, setErrorMessage] = useState('')
  const [promptOpen, setPromptOpen] = useState(false)

  const editor = useEditor(
    {
      extensions: [
        StarterKit,
        Table,
        TableRow,
        TableCell,
        TableHeader,
        Placeholder.configure({
          placeholder: 'Use the button above to open a dialog to enter your prompt...', 
        }),
        Ai.configure({
          appId: 'APP_ID_HERE',
          token: 'TOKEN_HERE',
          // WARNING: Remove this line in your code. It only works in the demo environment.
          baseUrl: variables.tiptapAiBaseUrl,
          autocompletion: true,
          onLoading: () => {
            setErrorMessage('')
          },
          onSuccess: props => {
            setCurrentIdx(((props.editor.storage.ai || props.editor.storage.aiAdvanced)).pastResponses.length - 1)
          },
          onError: error => {
            setErrorMessage(error.message)
          },
        }),
      ],
    },
    [],
  )

  if (!editor) {
    return null
  }

  const aiStorage = editor.storage.ai || editor.storage.aiAdvanced
  const currentResponse = aiStorage.state === 'loading'
    ? aiStorage.response
    : aiStorage.pastResponses[currentIdx] || aiStorage.response

  const htmlResponse = currentResponse ? tryParseToTiptapHTML(currentResponse, editor) : ''

  return (
    <div>
      <div className="control-group">
        <button onClick={() => setPromptOpen(s => !s)}>💬 Open prompt dialog</button>
      </div>

      <EditorContent editor={editor} />
      <div className="dialog" role="dialog" data-state={promptOpen ? 'open' : 'closed'}>
        <div className="dialog-content row-group">
          <div className="main">
            {errorMessage && <div className="hint error">{errorMessage}</div>}
            {/* This is safe since we've parsed the content with prose-mirror first */}
            {htmlResponse ? (
              <div dangerouslySetInnerHTML={{ __html: htmlResponse }} className="tiptap"></div>
            ) : (
              <div className="tiptap">
                <div
                  className="is-empty"
                  data-placeholder="Your generated content is previewed here …"
                ></div>
              </div>
            )}
            {/* Could also use another instance of tiptap here */}
          </div>
          <div className="prompt-dialog-group">
            <label className="label-large">Prompt</label>
            <textarea
              placeholder="Write your prompt to the AI assistant and provide details like *use headings and a list for key features*. "
              value={chatResponse}
              onChange={e => setChatResponse(e.target.value)}
            ></textarea>
            <div className="flex-row">
              <div className="button-group">

```

--------------------------------

### Install Tiptap and Starter Kit

Source: https://v2.tiptap.dev/docs/guides/migrate-from-editorjs

Install the core Tiptap package and the starter kit for basic editor functionality.

```bash
npm install @tiptap/core @tiptap/starter-kit

```

--------------------------------

### Install DetailsSummary Extension

Source: https://v2.tiptap.dev/docs/editor/extensions/nodes/details-summary

Command to install the DetailsSummary extension using npm.

```bash
npm install @tiptap/extension-details-summary

```

--------------------------------

### Start Development Environment

Source: https://v2.tiptap.dev/docs/resources/contributing

Start the local development server to tinker with Tiptap and see changes in real-time.

```bash
npm run start
```

--------------------------------

### Install Tiptap Import Extension

Source: https://v2.tiptap.dev/docs/conversion/import-export/markdown

Install the Import extension from Tiptap's private npm registry. Ensure you have followed the private registry guide.

```bash
npm i @tiptap-pro/extension-import
```

--------------------------------

### Install Placeholder Extension

Source: https://v2.tiptap.dev/docs/editor/extensions/functionality/placeholder

Install the placeholder extension using npm.

```bash
npm install @tiptap/extension-placeholder

```

--------------------------------

### Install Server Libraries

Source: https://v2.tiptap.dev/docs/content-ai/capabilities/agent/custom-llms/get-started/openai-responses

Install the AI Agent server extension and the OpenAI library using npm.

```bash
npm install @tiptap-pro/extension-ai-agent-server openai

```

--------------------------------

### Install Server-Side Libraries

Source: https://v2.tiptap.dev/docs/content-ai/capabilities/agent/custom-llms/get-started/anthropic-messages

Install the AI Agent server extension and the Anthropic SDK for server-side integration.

```bash
npm install @tiptap-pro/extension-ai-agent-server @anthropic-ai/sdk

```

--------------------------------

### Install YouTube Extension

Source: https://v2.tiptap.dev/docs/editor/extensions/nodes/youtube

Install the YouTube extension using npm.

```bash
npm install @tiptap/extension-youtube

```

--------------------------------

### Install DetailsContent Extension

Source: https://v2.tiptap.dev/docs/editor/extensions/nodes/details-content

This command installs the DetailsContent extension package using npm. Ensure you have the Details and DetailsSummary extensions already installed.

```bash
npm install @tiptap/extension-details-content

```

--------------------------------

### Install Mathematics Extension

Source: https://v2.tiptap.dev/docs/editor/extensions/functionality/mathematics

Install the Tiptap Mathematics extension and KaTeX using npm.

```bash
npm install @tiptap/extension-mathematics katex
```

--------------------------------

### Install Pro Extension Globally

Source: https://v2.tiptap.dev/docs/guides/pro-extensions

Install any Tiptap Pro extension after configuring global authentication.

```bash
npm install --save @tiptap-pro/extension-comments

```

--------------------------------

### Install Table of Contents Extension

Source: https://v2.tiptap.dev/docs/editor/extensions/functionality/table-of-contents

Install the extension from the private registry using npm.

```bash
npm install @tiptap/extension-table-of-contents
```

--------------------------------

### Install Strike Extension

Source: https://v2.tiptap.dev/docs/editor/extensions/marks/strike

Install the Strike extension using npm.

```bash
npm install @tiptap/extension-strike
```

--------------------------------

### Install BulletList and ListItem Extensions

Source: https://v2.tiptap.dev/docs/editor/extensions/nodes/bullet-list

Install the necessary Tiptap extensions for bullet lists. This command installs both the BulletList and ListItem extensions.

```bash
npm install @tiptap/extension-bullet-list @tiptap/extension-list-item

```

--------------------------------

### Install Link Extension

Source: https://v2.tiptap.dev/docs/editor/extensions/marks/link

Install the Link extension using npm.

```bash
npm install @tiptap/extension-link

```

--------------------------------

### Install Collaboration Provider Package

Source: https://v2.tiptap.dev/docs/collaboration/provider/integration

Install the Collaboration provider package using npm. Ensure you are using a compatible version with your Tiptap installation.

```bash
npm install @hocuspocus/provider@^2.15.2

```

--------------------------------

### Install Tiptap Dependencies

Source: https://v2.tiptap.dev/docs/editor/getting-started/install/nextjs

Install the necessary Tiptap packages for React integration and the starter kit.

```bash
npm install @tiptap/react @tiptap/pm @tiptap/starter-kit

```

--------------------------------

### Install Mention Extension

Source: https://v2.tiptap.dev/docs/editor/extensions/nodes/mention

Install the Mention extension package using npm.

```bash
npm install @tiptap/extension-mention

```

--------------------------------

### Install CodeBlockLowlight Extension

Source: https://v2.tiptap.dev/docs/editor/extensions/nodes/code-block-lowlight

Install the necessary packages for the CodeBlockLowlight extension using npm.

```bash
npm install lowlight @tiptap/extension-code-block-lowlight

```

--------------------------------

### Install Tiptap Editor Packages

Source: https://v2.tiptap.dev/docs/collaboration/getting-started/install

Install the basic Tiptap editor and necessary extensions using npm.

```bash
npm install @tiptap/extension-document @tiptap/extension-paragraph @tiptap/extension-text @tiptap/react
```

--------------------------------

### Install TextAlign Extension

Source: https://v2.tiptap.dev/docs/editor/extensions/functionality/textalign

Install the TextAlign extension using npm.

```bash
npm install @tiptap/extension-text-align

```

--------------------------------

### Quill Toolbar Configuration Example

Source: https://v2.tiptap.dev/docs/guides/migrate-from-quill

This is an example of a Quill toolbar configuration.

```javascript
// Quill toolbar config
toolbar: [
  ['bold', 'italic', 'underline'],
  ['link', 'image'],
  [{ list: 'ordered' }, { list: 'bullet' }],
  [{ header: [1, 2, 3, false] }],
]
```

--------------------------------

### Install Dropcursor Extension

Source: https://v2.tiptap.dev/docs/editor/extensions/functionality/dropcursor

Install the Dropcursor extension using npm.

```bash
npm install @tiptap/extension-dropcursor

```

--------------------------------

### Install History Extension

Source: https://v2.tiptap.dev/docs/editor/extensions/functionality/undo-redo

Installs the Tiptap History extension using npm.

```bash
npm install @tiptap/extension-history

```

--------------------------------

### Install TaskList and TaskItem Extensions

Source: https://v2.tiptap.dev/docs/editor/extensions/nodes/task-list

Install the necessary Tiptap extensions for task list functionality using npm.

```bash
npm install @tiptap/extension-task-list @tiptap/extension-task-item

```

--------------------------------

### Install StarterKit Extension

Source: https://v2.tiptap.dev/docs/editor/extensions/functionality/starterkit

Install the StarterKit extension using npm. This is the first step before using it in your Tiptap editor.

```bash
npm install @tiptap/starter-kit

```

--------------------------------

### Install Floating Menu Extension

Source: https://v2.tiptap.dev/docs/editor/extensions/functionality/floatingmenu

Install the floating menu extension using npm.

```bash
npm install @tiptap/extension-floating-menu

```

--------------------------------

### Install FileHandler Extension

Source: https://v2.tiptap.dev/docs/editor/extensions/functionality/filehandler

Use npm to install the FileHandler extension. This is the first step before configuring it in your editor.

```bash
npm install @tiptap/extension-file-handler

```

--------------------------------

### Install Tiptap and Dependencies

Source: https://v2.tiptap.dev/docs/guides/migrate-from-ckeditor4

Install Tiptap core and the starter kit using npm. Ensure you follow framework-specific instructions for React or Vue.

```bash
npm install @tiptap/core @tiptap/starter-kit
```

--------------------------------

### Install Tiptap Export Extension

Source: https://v2.tiptap.dev/docs/conversion/import-export/markdown

Install the Export extension from Tiptap's private npm registry. Ensure you have followed the private registry guide.

```bash
npm i @tiptap-pro/extension-export
```

--------------------------------

### Initialize Tiptap Project

Source: https://v2.tiptap.dev/docs/ui-components/getting-started/cli

Use the `init` command to set up your project configuration and install dependencies. This command can also add specified components during initialization.

```bash
npx @tiptap/cli init

```

--------------------------------

### Usage Example for Text Align Button

Source: https://v2.tiptap.dev/docs/ui-components/components/text-align-button

Integrate the TextAlignButton component into your Tiptap editor setup. Ensure you import the necessary extensions and styles. This example shows how to configure the editor with TextAlign and render the alignment buttons.

```jsx
import { EditorContent, EditorContext, useEditor } from '@tiptap/react'
import { StarterKit } from '@tiptap/starter-kit'
import { TextAlign } from '@tiptap/extension-text-align'
import { TextAlignButton } from '@/components/tiptap-ui/text-align-button'

import '@/components/tiptap-node/paragraph-node/paragraph-node.scss'

export default function MyEditor() {
  const editor = useEditor({
    immediatelyRender: false,
    extensions: [StarterKit, TextAlign.configure({ types: ['heading', 'paragraph'] })],
    content: `
        <p>Try selecting a paragraph and clicking one of the text alignment buttons.</p>
        <p style="text-align: left">Left-aligned text.</p>
        <p style="text-align: center">Center-aligned text.</p>
        <p style="text-align: right">Right-aligned text.</p>
        <p style="text-align: justify">Justified text.</p>
        `,
  })

  return (
    <EditorContext.Provider value={{ editor }}>
      <div className="tiptap-button-group" data-orientation="horizontal">
        <TextAlignButton align="left" />
        <TextAlignButton align="center" />
        <TextAlignButton align="right" />
        <TextAlignButton align="justify" />
      </div>

      <EditorContent editor={editor} role="presentation" />
    </EditorContext.Provider>
  )
}

```

--------------------------------

### Use StarterKit Extension

Source: https://v2.tiptap.dev/docs/editor/getting-started/configure

Initialize the editor with the StarterKit, which bundles common extensions.

```javascript
import StarterKit from '@tiptap/starter-kit'

new Editor({
  extensions: [StarterKit],
})
```

--------------------------------

### Accessing Node Position

Source: https://v2.tiptap.dev/docs/editor/api/node-positions

Get the absolute position (index) of the node within the document. This is a numerical value representing the start of the node.

```javascript
const pos = myNodePos.pos
```

--------------------------------

### Basic CodeBlockLowlight Setup

Source: https://v2.tiptap.dev/docs/examples/advanced/syntax-highlighting

This snippet shows the fundamental setup for the CodeBlockLowlight extension. It requires importing the extension and configuring it with a highlighter.

```javascript
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
import { useEditor, EditorContent } from '@tiptap/react'
import css from 'highlight.js/lib/languages/css'
import js from 'highlight.js/lib/languages/javascript'
import { lowlight } from 'lowlight'

lowlight.registerLanguage('css', css)
lowlight.registerLanguage('js', js)

const editor = useEditor({
  extensions: [
    Document,
    Paragraph,
    Text,
    CodeBlockLowlight.configure({
      lowlight
    })
  ],
  content: '<p>Hello World!</p><pre><code class="language-js">console.log(\'Hello World\')</code></pre>'
})

return (
  <EditorContent editor={editor} />
)
```

--------------------------------

### Install List Button Component

Source: https://v2.tiptap.dev/docs/ui-components/components/list-button

Install the list-button component using the Tiptap CLI for Vite or Next.js projects.

```bash
npx @tiptap/cli add list-button

```

--------------------------------

### Heading Button Usage Example

Source: https://v2.tiptap.dev/docs/ui-components/components/heading-button

Integrate the HeadingButton component into your Tiptap editor setup. Ensure necessary styles and editor context are provided.

```javascript
import { HeadingButton } from '@/components/tiptap-ui/heading-button'
import { EditorContent, EditorContext, useEditor } from '@tiptap/react'
import { StarterKit } from '@tiptap/starter-kit'

import '@/components/tiptap-node/paragraph-node/paragraph-node.scss'

export default function MyEditor() {
  const editor = useEditor({
    immediatelyRender: false,
    extensions: [StarterKit],
    content: `
          <h1>Heading 1</h1>
          <h2>Heading 2</h2>
          <h3>Heading 3</h3>
          <h4>Heading 4</h4>
        `,
  })

  return (
    <EditorContext.Provider value={{ editor }}>
      <div className="tiptap-button-group" data-orientation="horizontal">
        <HeadingButton level={1}></HeadingButton>
        <HeadingButton level={2}></HeadingButton>
        <HeadingButton level={3}></HeadingButton>
        <HeadingButton level={4}></HeadingButton>
      </div>

      <EditorContent editor={editor} role="presentation" />
    </EditorContext.Provider>
  )
}

```

--------------------------------

### Basic Tiptap Editor Setup

Source: https://v2.tiptap.dev/docs/guides/migrate-from-tinymce

Replace TinyMCE initialization with Tiptap's basic setup. Ensure to import necessary extensions.

```javascript
// TinyMCE (before)
tinymce.init({
  selector: '#editor',
  plugins: 'lists link image table code',
  toolbar: 'undo redo | bold italic | bullist numlist | link image',
})

// Tiptap (after)
import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'

const editor = new Editor({
  element: document.querySelector('#editor'),
  extensions: [StarterKit],
  content: '<p>Hello World!</p>',
})
```

--------------------------------

### Integrate Mark Button in Tiptap Editor

Source: https://v2.tiptap.dev/docs/ui-components/components/mark-button

Example of integrating the MarkButton component into a Tiptap editor setup, including necessary extensions and UI elements.

```jsx
import { EditorContent, EditorContext, useEditor } from '@tiptap/react'
import { StarterKit } from '@tiptap/starter-kit'
import { Underline } from '@tiptap/extension-underline'
import { Superscript } from '@tiptap/extension-superscript'
import { Subscript } from '@tiptap/extension-subscript'
import { MarkButton } from '@/components/tiptap-ui/mark-button'

import '@/components/tiptap-node/code-block-node/code-block-node.scss'
import '@/components/tiptap-node/paragraph-node/paragraph-node.scss'

export default function MyEditor() {
  const editor = useEditor({
    immediatelyRender: false,
    extensions: [StarterKit, Underline, Superscript, Subscript],
    content: `
        <p>
            <strong>Bold</strong> for emphasis with <code>**</code> or <code>⌘+B</code> or the <code>B</code> button.
        </p>
        <p>
            <em>Italic</em> for subtle nuances with <code>*</code> or <code>⌘+I</code> or the <code>I</code> button.
        </p>
        <p>
            <s>Strikethrough</s> to show revisions with <code>~~</code> or the <code>~~S~~</code> button.
        </p>
        <p>
            <code>Code</code> for code snippets with <code>:</code> or <code>⌘+⇧+C</code> or the <code>C</code> button.
        </p>
        <p>
            <u>Underline</u> for emphasis with <code>⌘+U</code> or the <code>U</code> button.
        </p>
        <p>
            <sup>Superscript</sup> for footnotes with <code>⌘+.</code> or the <code>.</code> button.
        </p>
        <p>
            <sub>Subscript</sub> for chemical formulas with <code>⌘+,</code> or the <code>,</code> button.
        </p>
        `,
  })

  return (
    <EditorContext.Provider value={{ editor }}>
      <div className="tiptap-button-group" data-orientation="horizontal">
        <MarkButton type="bold" />
        <MarkButton type="italic" />
        <MarkButton type="strike" />
        <MarkButton type="code" />
        <MarkButton type="underline" />
        <MarkButton type="superscript" />
        <MarkButton type="subscript" />
      </div>

      <EditorContent editor={editor} role="presentation" />
    </EditorContext.Provider>
  )
}

```

--------------------------------

### Undo Redo Button Usage Example

Source: https://v2.tiptap.dev/docs/ui-components/components/undo-redo-button

Integrate the UndoRedoButton component into your Tiptap editor setup. Ensure necessary styles and editor context are provided.

```jsx
import { EditorContent, EditorContext, useEditor } from '@tiptap/react'
import { StarterKit } from '@tiptap/starter-kit'
import { UndoRedoButton } from '@/components/tiptap-ui/undo-redo-button'

import '@/components/tiptap-node/paragraph-node/paragraph-node.scss'

export default function MyEditor() {
  const editor = useEditor({
    immediatelyRender: false,
    extensions: [StarterKit],
    content: `
        <p>Try typing something and then click the undo and redo buttons.</p>
        `,
  })

  return (
    <EditorContext.Provider value={{ editor }}>
      <div className="tiptap-button-group" data-orientation="horizontal">
        <UndoRedoButton action="undo" />
        <UndoRedoButton action="redo" />
      </div>

      <EditorContent editor={editor} role="presentation" />
    </EditorContext.Provider>
  )
}

```

--------------------------------

### Accessing Node Range (from/to)

Source: https://v2.tiptap.dev/docs/editor/api/node-positions

Get the starting ('from') and ending ('to') positions of the node in the document. The 'range' property provides the difference between 'to' and 'from'.

```javascript
const from = myNodePos.from
```

```javascript
const to = myNodePos.to
```

```javascript
const range = myNodePos.range
```

--------------------------------

### Configure Tiptap Extensions

Source: https://v2.tiptap.dev/docs/guides/migrate-from-draftjs

Example of configuring Tiptap extensions, including StarterKit, Image, TextStyle, Color, and Highlight. Shows how to enable specific options like inline images and multicolor highlighting.

```javascript
import { useEditor } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
import Image from '@tiptap/extension-image'
import { Color } from '@tiptap/extension-color'
import TextStyle from '@tiptap/extension-text-style'
import Highlight from '@tiptap/extension-highlight'

const editor = useEditor({
  extensions: [
    StarterKit,
    Image.configure({
      inline: true,
      allowBase64: true,
    }),
    TextStyle,
    Color.configure({
      types: [TextStyle.name],
    }),
    Highlight.configure({
      multicolor: true,
    }),
  ],
})
```

--------------------------------

### Minimal Editor Setup

Source: https://v2.tiptap.dev/docs/editor/getting-started/configure

Set up the editor with the minimal required extensions: Document, Paragraph, and Text.

```javascript
import { Editor } from '@tiptap/core'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'

new Editor({
  element: document.querySelector('.element'),
  extensions: [Document, Paragraph, Text],
})
```

--------------------------------

### cURL Example for Getting a Document

Source: https://v2.tiptap.dev/docs/collaboration/documents/rest-api

This cURL command demonstrates how to make a request to the Tiptap Collaboration API to retrieve a document. Ensure you replace placeholders with your actual application ID and secret.

```curl
curl --location 'https://YOUR_APP_ID.collab.tiptap.cloud/api/documents/DOCUMENT_NAME' \
--header 'Authorization: YOUR_SECRET_FROM_SETTINGS_AREA'
```

--------------------------------

### Image Upload Button Usage Example

Source: https://v2.tiptap.dev/docs/ui-components/components/image-upload-button

Integrate the ImageUploadButton component into your Tiptap editor setup. Ensure necessary extensions and styles are imported. The upload function and error handling are configured via the ImageUploadNode.

```javascript
import { EditorContent, EditorContext, useEditor } from '@tiptap/react'
import { StarterKit } from '@tiptap/starter-kit'
import { Image } from '@tiptap/extension-image'
import { ImageUploadButton } from '@/components/tiptap-ui/image-upload-button'
import { ImageUploadNode } from '@/components/tiptap-node/image-upload-node'
import { handleImageUpload, MAX_FILE_SIZE } from '@/lib/tiptap-utils'

import '@/components/tiptap-node/image-node/image-node.scss'
import '@/components/tiptap-node/paragraph-node/paragraph-node.scss'

export default function MyEditor() {
  const editor = useEditor({
    immediatelyRender: false,
    extensions: [
      StarterKit,
      Image,
      ImageUploadNode.configure({
        accept: 'image/*',
        maxSize: MAX_FILE_SIZE,
        limit: 3,
        upload: handleImageUpload,
        onError: (error) => console.error('Upload failed:', error),
      }),
    ],
    content: `
        <p>Click the button to upload an image.</p>
        `,
  })

  return (
    <EditorContext.Provider value={{ editor }}>
      <div className="tiptap-button-group" data-orientation="horizontal">
        <ImageUploadButton text="Add" />
      </div>

      <EditorContent editor={editor} role="presentation" />
    </EditorContext.Provider>
  )
}

```

--------------------------------

### Vue 3 Editor Integration with Custom Node View

Source: https://v2.tiptap.dev/docs/editor/extensions/custom-extensions/node-views/javascript

This example demonstrates how to integrate a custom JavaScript node view into a Vue 3 Tiptap editor. It shows the editor setup, extension registration, and content with the custom node.

```vue
<template>
  <editor-content :editor="editor" />
</template>

<script>
import StarterKit from '@tiptap/starter-kit'
import { Editor, EditorContent } from '@tiptap/vue-3'

import NodeView from './Extension.js'

export default {
  components: {
    EditorContent,
  },

  data() {
    return {
      editor: null,
    }
  },

  mounted() {
    this.editor = new Editor({
      extensions: [
        StarterKit,
        NodeView,
      ],
      content: persisted_content: `
        <p>
          This is still the text editor you’re used to, but enriched with node views.
        </p>
        <node-view></node-view>
        <p>
          Did you see that? That’s a JavaScript node view. We are really living in the future.
        </p>
      `,
    })
  },

  beforeUnmount() {
    this.editor.destroy()
  },
}
</script>

<style lang="scss">
/* Basic editor styles */
.tiptap {
  :first-child {
    margin-top: 0;
  }

  /* List styles */
  ul, ol {
    padding: 0 1rem;
    margin: 1.25rem 1rem 1.25rem 0.4rem;

    li p {
      margin-top: 0.25em;
      margin-bottom: 0.25em;
    }
  }

  /* Heading styles */
  h1, h2, h3, h4, h5, h6 {
    line-height: 1.1;
    margin-top: 2.5rem;
    text-wrap: pretty;
  }

  h1, h2 {
    margin-top: 3.5rem;
    margin-bottom: 1.5rem;
  }

  h1 {
    font-size: 1.4rem;
  }

  h2 {
    font-size: 1.2rem;
  }

  h3 {
    font-size: 1.1rem;
  }

  h4, h5, h6 {
    font-size: 1rem;
  }

  /* Code and preformatted text styles */
  code {
    background-color: var(--purple-light);
    border-radius: 0.4rem;
    color: var(--black);
    font-size: 0.85rem;
    padding: 0.25em 0.3em;
  }

  pre {
    background: var(--black);
    border-radius: 0.5rem;
    color: var(--white);
    font-family: 'JetBrainsMono', monospace;
    margin: 1.5rem 0;
    padding: 0.75rem 1rem;

    code {
      background: none;
      color: inherit;
      font-size: 0.8rem;
      padding: 0;
    }
  }

  blockquote {
    border-left: 3px solid var(--gray-3);
    margin: 1.5rem 0;
    padding-left: 1rem;
  }

  hr {
    border: none;
    border-top: 1px solid var(--gray-2);
    margin: 2rem 0;
  }

  /* Node view */
  .node-view {
    background-color: var(--purple-light);
    border: 2px solid var(--purple);
    border-radius: 0.5rem;
    margin: 2rem 0;
    position: relative;

    label {
      background-color: var(--purple);
      border-radius: 0 0 0.5rem 0;
      color: var(--white);
      font-size: 0.75rem;
      font-weight: bold;
      padding: 0.25rem 0.5rem;
      position: absolute;
      top: 0;
    }

    .content {
      margin-top: 1.5rem;
      padding: 1rem;
    }
  }
}
</style>

```

--------------------------------

### Install Tiptap Dependencies

Source: https://v2.tiptap.dev/docs/editor/getting-started/install/vanilla-javascript

Install the core Tiptap editor, ProseMirror, and the StarterKit extension using npm. This is the first step for using Tiptap in a project without a bundler.

```bash
npm install @tiptap/core @tiptap/pm @tiptap/starter-kit
```

--------------------------------

### Vue 3 Editor Integration with Custom Node View

Source: https://v2.tiptap.dev/docs/editor/extensions/custom-extensions/node-views/javascript

This example shows how to integrate a custom JavaScript node view into a Vue 3 application using Tiptap. It includes the necessary component setup, editor initialization with extensions, and sample content with the custom node.

```html
<template>
  <editor-content :editor="editor" />
</template>

```

```javascript
import StarterKit from '@tiptap/starter-kit'
import { Editor, EditorContent } from '@tiptap/vue-3'

import NodeView from './Extension.js'

export default {
  components: {
    EditorContent,
  },

  data() {
    return {
      editor: null,
    }
  },

  mounted() {
    this.editor = new Editor({
      extensions: [
        StarterKit,
        NodeView,
      ],
      content: `
        <p>
          This is still the text editor you’re used to, but enriched with node views.
        </p>
        <node-view>
          <p>This is editable.</p>
        </node-view>
        <p>
          Did you see that? That’s a JavaScript node view. We are really living in the future.
        </p>
      `,
    })
  },

  beforeUnmount() {
    this.editor.destroy()
  },
}

```

```css
/* Basic editor styles */
.tiptap {
  :first-child {
    margin-top: 0;
  }

  /* List styles */
  ul, ol {
    padding: 0 1rem;
    margin: 1.25rem 1rem 1.25rem 0.4rem;

    li p {
      margin-top: 0.25em;
      margin-bottom: 0.25em;
    }
  }

  /* Heading styles */
  h1, h2, h3, h4, h5, h6 {
    line-height: 1.1;
    margin-top: 2.5rem;
    text-wrap: pretty;
  }

  h1, h2 {
    margin-top: 3.5rem;
    margin-bottom: 1.5rem;
  }

  h1 {
    font-size: 1.4rem;
  }

  h2 {
    font-size: 1.2rem;
  }

  h3 {
    font-size: 1.1rem;
  }

  h4, h5, h6 {
    font-size: 1rem;
  }

  /* Code and preformatted text styles */
  code {
    background-color: var(--purple-light);
    border-radius: 0.4rem;
    color: var(--black);
    font-size: 0.85rem;
    padding: 0.25em 0.3em;
  }

  pre {
    background: var(--black);
    border-radius: 0.5rem;
    color: var(--white);
    font-family: 'JetBrainsMono', monospace;
    margin: 1.5rem 0;
    padding: 0.75rem 1rem;

    code {
      background: none;
      color: inherit;
      font-size: 0.8rem;
      padding: 0;
    }
  }

  blockquote {
    border-left: 3px solid var(--gray-3);
    margin: 1.5rem 0;
    padding-left: 1rem;
  }

  hr {
    border: none;
    border-top: 1px solid var(--gray-2);
    margin: 2rem 0;
  }

  /* Node view */
  .node-view {
    background-color: var(--purple-light);
    border: 2px solid var(--purple);
    border-radius: 0.5rem;
    margin: 2rem 0;
    position: relative;

    label {
      background-color: var(--purple);
      border-radius: 0 0 0.5rem 0;
      color: var(--white);
      font-size: 0.75rem;
      font-weight: bold;
      padding: 0.25rem 0.5rem;
      position: absolute;
      top: 0;
    }

    .content {
      margin-top: 1.5rem;
      padding: 1rem;

      &.is-editable {
        border: 2px dashed var(--gray-3);
        border-radius: 0.5rem;
        margin: 2.5rem 1rem 1rem;
        padding: 0.5rem;
      }
    }
  }
}

```

--------------------------------

### Call Vercel AI SDK with Custom Tools

Source: https://v2.tiptap.dev/docs/content-ai/capabilities/agent/custom-llms/server-side-tools/vercel-ai-sdk

Integrate custom tools, like the `weatherTool`, into the `generateText` call from the Vercel AI SDK. Ensure `maxSteps` is set greater than 1 to enable multi-step tool calls. This example also shows the setup for `AiAgentToolkit` and `ChatMessagesFormatter`.

```typescript
import {
  AiAgentToolkit,
  vercelAiSdkAdapter,
  ChatMessagesFormatter,
} from '@tiptap-pro/extension-ai-agent-server'
import { generateText } from 'ai'
import { openai } from '@ai-sdk/openai'

const { chatMessages, schemaAwarenessData } = request

const toolkit = new AiAgentToolkit({
  adapter: vercelAiSdkAdapter,
  schemaAwarenessData,
})

const formatter = new ChatMessagesFormatter({
  // Get the chat messages from the request body
  initialMessages: chatMessages,
  adapter: vercelAiSdkAdapter,
})

// Call the Vercel AI SDK
const response = await generateText({
  model: openai('gpt-4.1'),
  messages: [
    {
      role: 'system',
      content: `
<Your system prompt>
${toolkit.getSystemPrompt()}
`,
    },
    ...formatter.format(),
  ],
  // Include the weather tool in the tools object, beside
  // the other tools provided by AiAgentToolkit
  tools: {
    ...toolkit.format(),
    get_weather: weatherTool,
  },
  // Enable multi-step tool calls
  maxSteps: 5,
})
```

--------------------------------

### Custom Heading NodeView with Attribute Change Highlighting

Source: https://v2.tiptap.dev/docs/collaboration/documents/snapshot-compare

This example demonstrates how to customize a heading node view to display changes in the 'level' attribute. It uses the `extractAttributeChanges` helper from `@tiptap-pro/extension-snapshot-compare` to get previous and current attribute values. Pass the `diff` as the decoration's `spec` when mapping diffs into decorations yourself.

```javascript
import { extractAttributeChanges } from '@tiptap-pro/extension-snapshot-compare'

const Heading = BaseHeading.extend({
  addNodeView() {
    return ReactNodeViewRenderer(({ node, decorations }) => {
      const { before, after, isDiffing } = extractAttributeChanges(decorations)

      return (
        <NodeViewWrapper style={{ position: 'relative' }}>
          {isDiffing && before.level !== after.level && (
            <span
              style={{
                position: 'absolute',
                right: '100%',
                fontSize: '14px',
                color: '#999',
                backgroundColor: '#f0f0f070',
              }}
              // Display the difference in level attribute
            >
              #<s>{before.level}</s>
              {after.level}
            </span>
          )}
          <NodeViewContent as={`h${node.attrs.level ?? 1}`} />
        </NodeViewWrapper>
      )
    })
  },
})
```

--------------------------------

### Tiptap CLI Init Command Options

Source: https://v2.tiptap.dev/docs/ui-components/getting-started/cli

These are the available options for the `init` command. They allow customization of the initialization process, such as specifying the framework, forcing overwrites, or setting the working directory.

```bash
Usage: @tiptap/cli init [options] [components...]

Options:
-f, --framework <framework>   The framework to use (e.g., next, vite)
-f, --force                   Force overwrite of existing configuration
-c, --cwd <cwd>               The working directory (defaults to current directory)
-s, --silent                  Mute output
--src-dir                     Default: Use the src directory when creating a new project
--no-src-dir                  Do not use the src directory when creating a new project

```

--------------------------------

### Initialize Next.js Project with Tiptap CLI

Source: https://v2.tiptap.dev/docs/ui-components/install/next

Use this command to create a new Next.js project or set up an existing one with Tiptap. You will be prompted to choose between a Next.js project or a Monorepo, and whether to add templates or UI components.

```bash
pnpm dlx @tiptap/cli init

```

--------------------------------

### Install Collaboration History Extension

Source: https://v2.tiptap.dev/docs/collaboration/documents/history

Install the necessary packages for the Tiptap collaboration history extension and the Hocuspocus transformer. Ensure yjs is installed as a peer dependency.

```bash
npm install @tiptap-pro/extension-collaboration-history @hocuspocus/transformer
```

--------------------------------

### Basic Editor Setup: Editor.js vs Tiptap

Source: https://v2.tiptap.dev/docs/guides/migrate-from-editorjs

Compare the initialization code for Editor.js and Tiptap. Tiptap uses a different approach with extensions instead of tools.

```javascript
// Editor.js (before)
import EditorJS from '@editorjs/editorjs'
import Header from '@editorjs/header'
import List from '@editorjs/list'
import Quote from '@editorjs/quote'
import Code from '@editorjs/code'
import Image from '@editorjs/image'

const editor = new EditorJS({
  holder: 'editorjs',
  tools: {
    header: Header,
    list: List,
    quote: Quote,
    code: Code,
    image: Image,
  },
})

// Tiptap (after)
import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'

const editor = new Editor({
  element: document.querySelector('#editor'),
  extensions: [StarterKit],
  content: '<p>Hello World!</p>',
})

```

--------------------------------

### Create a New SvelteKit Project

Source: https://v2.tiptap.dev/docs/editor/getting-started/install/svelte

Use npm to create a new SvelteKit project and set up the development environment. This is optional if you have an existing project.

```bash
npm create svelte@latest my-tiptap-project
cd my-tiptap-project
npm install
npm run dev

```

--------------------------------

### Basic Tiptap Editor Setup with CDN

Source: https://v2.tiptap.dev/docs/editor/getting-started/install/cdn

This HTML snippet demonstrates how to include Tiptap editor using esm.sh CDN. It sets up a basic editor instance within a div element, including the StarterKit extension.

```html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <div class="element"></div>
    <script type="module">
      import { Editor } from 'https://esm.sh/@tiptap/core'
      import StarterKit from 'https://esm.sh/@tiptap/starter-kit'
      const editor = new Editor({
        element: document.querySelector('.element'),
        extensions: [StarterKit],
        content: '<p>Hello World!</p>',
      })
    </script>
  </body>
</html>

```

--------------------------------

### Implement Version Previews with TiptapCloudProvider

Source: https://v2.tiptap.dev/docs/collaboration/documents/history

Set up version previews by listening for stateless messages on the TiptapCloudProvider and updating the editor content. This allows for local-only previews without modifying the document directly.

```javascript
// Import the getPreviewContentFromVersionPayload helper function (refer to details below)
import { watchPreviewContent } from '@tiptap-pro/extension-collaboration-history'

// Configure the provider
const provider = new TiptapCollabProvider({ ... })

// Use the watchPreviewContent util function to watch for content changes on the provider
const unbindWatchContent = watchPreviewContent(provider, content => {
  // set your editors content
  editor.commands.setContent(content)
})
```

```javascript
const unbindWatchContent = watchPreviewContent(provider, (content) => {
  // set your editors content
  editor.commands.setContent(content)
})

// unwatch
unbindWatchContent()
```

```javascript
// Define a function that sends a version.preview request to the provider
const requestVersion = (version) => {
  provider.sendStateless(
    JSON.stringify({
      action: 'version.preview',
      // Include your version number here
      version,
    }),
  )
}

// Trigger the request
requestVersion(1)

// You can then link this function to button clicks or other UI elements to trigger the request.
```

--------------------------------

### Install Italic Extension

Source: https://v2.tiptap.dev/docs/editor/extensions/marks/italic

Install the Italic extension using npm.

```bash
npm install @tiptap/extension-italic
```

--------------------------------

### Install Superscript Extension

Source: https://v2.tiptap.dev/docs/editor/extensions/marks/superscript

Install the Superscript extension using npm.

```bash
npm install @tiptap/extension-superscript

```

--------------------------------

### Install Subscript Extension

Source: https://v2.tiptap.dev/docs/editor/extensions/marks/subscript

Install the subscript extension using npm.

```bash
npm install @tiptap/extension-subscript

```

--------------------------------

### Basic React Tiptap Editor Setup

Source: https://v2.tiptap.dev/docs/collaboration/getting-started/install

A minimal React setup for Tiptap Editor including Document, Paragraph, and Text extensions.

```jsx
import './styles.scss'

import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import { EditorContent, useEditor } from '@tiptap/react'
import React from 'react'

export default () => {
  const editor = useEditor({
    extensions: [
      Document,
      Paragraph,
      Text,
    ],
    content: `
      <p>
        This is a radically reduced version of Tiptap. It has support for a document, with paragraphs and text. That’s it. It’s probably too much for real minimalists though.
      </p>
      <p>
        The paragraph extension is not really required, but you need at least one node. Sure, that node can be something different.
      </p>
    `,
  })

  return (
    <EditorContent editor={editor} />
  )
}
```

--------------------------------

### Install UniqueID Extension

Source: https://v2.tiptap.dev/docs/editor/extensions/functionality/uniqueid

Install the UniqueID extension using npm.

```bash
npm install @tiptap/extension-unique-id

```

--------------------------------

### Install Server-side Dependencies

Source: https://v2.tiptap.dev/docs/content-ai/capabilities/agent/custom-llms/get-started/vercel-ai-sdk

Install the AI Agent server extension, AI SDK, and your preferred AI provider (e.g., OpenAI).

```bash
npm install @tiptap-pro/extension-ai-agent-server ai @ai-sdk/openai

```

--------------------------------

### Install List Dropdown Menu via Tiptap CLI

Source: https://v2.tiptap.dev/docs/ui-components/components/list-dropdown-menu

Install the ListDropdownMenu component using the Tiptap CLI for Vite or Next.js projects.

```bash
npx @tiptap/cli add list-dropdown-menu

```

--------------------------------

### Install CharacterCount Extension

Source: https://v2.tiptap.dev/docs/editor/extensions/functionality/character-count

Install the CharacterCount extension using npm.

```bash
npm install @tiptap/extension-character-count

```
Tokens:
Raw