> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/ueberdosis/tiptap/llms.txt
> Use this file to discover all available pages before exploring further.

# Installation

> Install Tiptap in your project with npm, yarn, or pnpm

# Installation

Install Tiptap using your preferred package manager. You'll need at least two packages: the core package and the starter kit (or individual extensions).

## Core Installation

Install the core Tiptap package and the starter kit, which includes the most common extensions:

<CodeGroup>
  ```bash npm theme={null}
  npm install @tiptap/core @tiptap/starter-kit
  ```

  ```bash yarn theme={null}
  yarn add @tiptap/core @tiptap/starter-kit
  ```

  ```bash pnpm theme={null}
  pnpm add @tiptap/core @tiptap/starter-kit
  ```
</CodeGroup>

### What's Included?

* **@tiptap/core** - The headless editor core (version 3.20.0)
* **@tiptap/starter-kit** - A collection of essential extensions including:
  * Document, Paragraph, Text (base nodes)
  * Bold, Italic, Strike, Code (text formatting)
  * Heading, Blockquote, Code Block (block nodes)
  * Bullet List, Ordered List (lists)
  * Hard Break, Horizontal Rule
  * Link, Underline
  * Undo/Redo functionality

<Note>
  The starter kit is perfect for getting started quickly. Once you're comfortable, you can install individual extensions for more granular control over your bundle size.
</Note>

## Framework-Specific Installation

Tiptap provides official integrations for popular frameworks. Choose the one that matches your tech stack.

### React

For React applications (supports React 17, 18, and 19):

<CodeGroup>
  ```bash npm theme={null}
  npm install @tiptap/react @tiptap/core @tiptap/starter-kit
  ```

  ```bash yarn theme={null}
  yarn add @tiptap/react @tiptap/core @tiptap/starter-kit
  ```

  ```bash pnpm theme={null}
  pnpm add @tiptap/react @tiptap/core @tiptap/starter-kit
  ```
</CodeGroup>

**Package Details:**

* **@tiptap/react** (version 3.20.0) - React components and hooks
* Supports React 17.x, 18.x, and 19.x
* Includes TypeScript definitions

### Vue 3

For Vue 3 applications:

<CodeGroup>
  ```bash npm theme={null}
  npm install @tiptap/vue-3 @tiptap/core @tiptap/starter-kit
  ```

  ```bash yarn theme={null}
  yarn add @tiptap/vue-3 @tiptap/core @tiptap/starter-kit
  ```

  ```bash pnpm theme={null}
  pnpm add @tiptap/vue-3 @tiptap/core @tiptap/starter-kit
  ```
</CodeGroup>

**Package Details:**

* **@tiptap/vue-3** (version 3.20.0) - Vue 3 components and composables
* Requires Vue 3.0.0 or higher
* Includes TypeScript definitions

### Vue 2

For Vue 2 applications:

<CodeGroup>
  ```bash npm theme={null}
  npm install @tiptap/vue-2 @tiptap/core @tiptap/starter-kit
  ```

  ```bash yarn theme={null}
  yarn add @tiptap/vue-2 @tiptap/core @tiptap/starter-kit
  ```

  ```bash pnpm theme={null}
  pnpm add @tiptap/vue-2 @tiptap/core @tiptap/starter-kit
  ```
</CodeGroup>

### Vanilla JavaScript

If you're not using a framework, just install the core packages:

<CodeGroup>
  ```bash npm theme={null}
  npm install @tiptap/core @tiptap/starter-kit
  ```

  ```bash yarn theme={null}
  yarn add @tiptap/core @tiptap/starter-kit
  ```

  ```bash pnpm theme={null}
  pnpm add @tiptap/core @tiptap/starter-kit
  ```
</CodeGroup>

## Installing Individual Extensions

For more control over your bundle size, install only the extensions you need:

<CodeGroup>
  ```bash npm theme={null}
  npm install @tiptap/core @tiptap/extension-document @tiptap/extension-paragraph @tiptap/extension-text @tiptap/extension-bold @tiptap/extension-italic
  ```

  ```bash yarn theme={null}
  yarn add @tiptap/core @tiptap/extension-document @tiptap/extension-paragraph @tiptap/extension-text @tiptap/extension-bold @tiptap/extension-italic
  ```

  ```bash pnpm theme={null}
  pnpm add @tiptap/core @tiptap/extension-document @tiptap/extension-paragraph @tiptap/extension-text @tiptap/extension-bold @tiptap/extension-italic
  ```
</CodeGroup>

### Popular Extensions

Here are some commonly used extensions:

| Extension       | Package Name                        | Description                    |
| --------------- | ----------------------------------- | ------------------------------ |
| Image           | `@tiptap/extension-image`           | Add and resize images          |
| Link            | `@tiptap/extension-link`            | Add hyperlinks                 |
| Table           | `@tiptap/extension-table`           | Create tables                  |
| Code Block      | `@tiptap/extension-code-block`      | Syntax-highlighted code blocks |
| Highlight       | `@tiptap/extension-highlight`       | Text highlighting              |
| Typography      | `@tiptap/extension-typography`      | Smart quotes and dashes        |
| Placeholder     | `@tiptap/extension-placeholder`     | Show placeholder text          |
| Character Count | `@tiptap/extension-character-count` | Count characters and words     |
| Collaboration   | `@tiptap/extension-collaboration`   | Real-time collaboration        |
| Mention         | `@tiptap/extension-mention`         | @ mentions                     |

<Tip>
  Browse the complete list of 100+ extensions in the [official documentation](https://tiptap.dev/docs/editor/extensions).
</Tip>

## ProseMirror Dependency

Tiptap requires ProseMirror as a peer dependency. The `@tiptap/pm` package bundles all necessary ProseMirror packages:

```bash theme={null}
npm install @tiptap/pm
```

This is usually installed automatically with the other Tiptap packages, but you may need to install it explicitly in some cases.

## Collaborative Editing

For real-time collaborative editing, install the collaboration extensions and Yjs:

<CodeGroup>
  ```bash npm theme={null}
  npm install @tiptap/extension-collaboration @tiptap/extension-collaboration-cursor yjs
  ```

  ```bash yarn theme={null}
  yarn add @tiptap/extension-collaboration @tiptap/extension-collaboration-cursor yjs
  ```

  ```bash pnpm theme={null}
  pnpm add @tiptap/extension-collaboration @tiptap/extension-collaboration-cursor yjs
  ```
</CodeGroup>

For a complete collaboration setup with a backend, check out [Hocuspocus](https://github.com/ueberdosis/hocuspocus), the official open-source collaboration backend.

## Verification

After installation, verify that Tiptap is installed correctly:

```javascript theme={null}
import { Editor } from '@tiptap/core'

console.log(Editor) // Should output the Editor constructor
```

## Troubleshooting

### Module Resolution Issues

If you encounter module resolution errors, ensure your bundler supports ES modules:

```json theme={null}
// vite.config.js
export default {
  optimizeDeps: {
    include: ['@tiptap/core', '@tiptap/starter-kit']
  }
}
```

### TypeScript Errors

For TypeScript projects, make sure you have the necessary type definitions:

```bash theme={null}
npm install --save-dev @types/react @types/react-dom  # For React
```

### Peer Dependency Warnings

If you see peer dependency warnings, install the missing packages:

```bash theme={null}
npm install @tiptap/pm
```

## Next Steps

Now that Tiptap is installed, head over to the [Quickstart](/quickstart) guide to create your first editor!