Skip to main content

​
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 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 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 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 install @tiptap/vue-2 @tiptap/core @tiptap/starter-kit

​
Vanilla JavaScript

If you’re not using a framework, just install the core packages: 
npm install @tiptap/core @tiptap/starter-kit

​
Installing Individual Extensions

For more control over your bundle size, install only the extensions you need: 
npm install @tiptap/core @tiptap/extension-document @tiptap/extension-paragraph @tiptap/extension-text @tiptap/extension-bold @tiptap/extension-italic
Here are some commonly used extensions:
ExtensionPackage NameDescription
Image@tiptap/extension-imageAdd and resize images
Link@tiptap/extension-linkAdd hyperlinks
Table@tiptap/extension-tableCreate tables
Code Block@tiptap/extension-code-blockSyntax-highlighted code blocks
Highlight@tiptap/extension-highlightText highlighting
Typography@tiptap/extension-typographySmart quotes and dashes
Placeholder@tiptap/extension-placeholderShow placeholder text
Character Count@tiptap/extension-character-countCount characters and words
Collaboration@tiptap/extension-collaborationReal-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 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!

Build docs developers (and LLMs) love

Get started for freeTalk to us