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:

npm

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

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

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.

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):

npm

npm install @tiptap/react @tiptap/core @tiptap/starter-kit

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:

npm

npm install @tiptap/vue-3 @tiptap/core @tiptap/starter-kit

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:

npm

npm install @tiptap/vue-2 @tiptap/core @tiptap/starter-kit

Vanilla JavaScript

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

npm

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

Installing Individual Extensions

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

npm

npm install @tiptap/core @tiptap/extension-document @tiptap/extension-paragraph @tiptap/extension-text @tiptap/extension-bold @tiptap/extension-italic

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

Browse the complete list of 100+ extensions in the official documentation.

ProseMirror Dependency

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

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:

npm

npm install @tiptap/extension-collaboration @tiptap/extension-collaboration-cursor yjs

For a complete collaboration setup with a backend, check out Hocuspocus, the official open-source collaboration backend.

Verification

After installation, verify that Tiptap is installed correctly:

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:

// 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:

npm install --save-dev @types/react @types/react-dom  # For React

Peer Dependency Warnings

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

npm install @tiptap/pm

Next Steps

Now that Tiptap is installed, head over to the Quickstart guide to create your first editor!