Skip to main content

​
Tiptap Editor

Tiptap is a headless, framework-agnostic rich text editor that’s completely customizable and extendable through extensions. Built on top of the robust ProseMirror library, Tiptap gives you full control over your editing experience without imposing any UI constraints.

Quickstart

Get up and running with Tiptap in minutes

Installation

Install Tiptap for your framework

Extensions

Browse 50+ extensions to enhance your editor

API Reference

Explore the complete API documentation

​
Why Tiptap?

​
Headless Architecture

Tiptap comes without any predefined user interface, giving you complete design freedom. Build your editor exactly the way you want it - no CSS overrides or hacky workarounds needed. Whether you prefer a minimal toolbar or a feature-rich interface, the choice is entirely yours.

​
Framework Agnostic

Whether you’re working with React, Vue, Svelte, or vanilla JavaScript, Tiptap integrates seamlessly. The core package @tiptap/core works everywhere, while framework-specific packages provide optimal integration patterns. 
// React
import { useEditor, EditorContent } from '@tiptap/react'

// Vue 3
import { useEditor, EditorContent } from '@tiptap/vue-3'

// Vanilla JS
import { Editor } from '@tiptap/core'

​
Extension-Based

Choose from over 100 official and community extensions to build the exact editor you need. From basic text formatting to advanced features like collaborative editing, tables, mentions, and code blocks - simply install the extensions you want. 
import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
import Image from '@tiptap/extension-image'
import Link from '@tiptap/extension-link'
import Table from '@tiptap/extension-table'

const editor = new Editor({
  extensions: [
    StarterKit,
    Image,
    Link,
    Table,
  ],
})

​
Built on ProseMirror

ProseMirror is a battle-tested rich text editing framework used by major platforms. Tiptap wraps ProseMirror with a modern, developer-friendly API while maintaining full access to ProseMirror’s power when you need it.

​
Key Features

50+ Extensions

Pre-built extensions for common editing features: bold, italic, links, lists, tables, code blocks, and more

Collaborative Editing

Real-time collaboration powered by Yjs and Hocuspocus, the open-source collaboration backend

Custom Extensions

Create your own extensions with full TypeScript support and comprehensive APIs

TypeScript First

Written in TypeScript with full type safety and excellent IDE support

Accessible

Built with accessibility in mind, following WAI-ARIA best practices

Performance

Optimized for large documents and complex editing scenarios

​
How It Works

Tiptap provides three key concepts:
  1. Editor - The core instance that manages the editing state
  2. Extensions - Modular pieces that add functionality (nodes, marks, and plugins)
  3. Commands - Methods to manipulate the editor content
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>',
})

// Use commands to modify content
editor.chain().focus().toggleBold().run()

​
Use Cases

  • Content management systems
  • Collaborative documentation tools
  • Note-taking applications
  • Blog and article editors
  • Chat and messaging interfaces
  • Code documentation platforms
  • Markdown editors

​
Community & Support

Tiptap is an open-source project with an active community:
Tiptap also offers Pro Extensions with advanced features like AI integration, comments, version history, and document conversion. Visit tiptap.dev to learn more.

​
Next Steps

Ready to get started? Follow the Installation guide to add Tiptap to your project, or jump straight to the Quickstart to build your first editor.

Build docs developers (and LLMs) love

Get started for freeTalk to us