> ## 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.

# Introduction to Tiptap

> A headless, framework-agnostic rich text editor that's customizable and extendable

# 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](https://prosemirror.net/) library, Tiptap gives you full control over your editing experience without imposing any UI constraints.

<CardGroup cols={2}>
  <Card title="Quickstart" icon="rocket" href="/quickstart">
    Get up and running with Tiptap in minutes
  </Card>

  <Card title="Installation" icon="download" href="/installation">
    Install Tiptap for your framework
  </Card>

  <Card title="Extensions" icon="puzzle-piece" href="/extensions/overview">
    Browse 50+ extensions to enhance your editor
  </Card>

  <Card title="API Reference" icon="code" href="/api/editor">
    Explore the complete API documentation
  </Card>
</CardGroup>

## 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.

```jsx theme={null}
// 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.

```javascript theme={null}
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

<CardGroup cols={2}>
  <Card title="50+ Extensions" icon="boxes-stacked">
    Pre-built extensions for common editing features: bold, italic, links, lists, tables, code blocks, and more
  </Card>

  <Card title="Collaborative Editing" icon="users">
    Real-time collaboration powered by Yjs and Hocuspocus, the open-source collaboration backend
  </Card>

  <Card title="Custom Extensions" icon="wrench">
    Create your own extensions with full TypeScript support and comprehensive APIs
  </Card>

  <Card title="TypeScript First" icon="code">
    Written in TypeScript with full type safety and excellent IDE support
  </Card>

  <Card title="Accessible" icon="universal-access">
    Built with accessibility in mind, following WAI-ARIA best practices
  </Card>

  <Card title="Performance" icon="gauge-high">
    Optimized for large documents and complex editing scenarios
  </Card>
</CardGroup>

## 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

```javascript theme={null}
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:

* [GitHub Discussions](https://github.com/ueberdosis/tiptap/discussions) - Ask questions and share ideas
* [Discord Community](https://discord.gg/WtJ49jGshW) - Chat with other developers
* [GitHub Repository](https://github.com/ueberdosis/tiptap) - Report issues and contribute
* [Official Documentation](https://tiptap.dev/docs) - Comprehensive guides and API docs

<Note>
  Tiptap also offers Pro Extensions with advanced features like AI integration, comments, version history, and document conversion. Visit [tiptap.dev](https://tiptap.dev) to learn more.
</Note>

## Next Steps

Ready to get started? Follow the [Installation](/installation) guide to add Tiptap to your project, or jump straight to the [Quickstart](/quickstart) to build your first editor.