# Tiptap — Headless Rich Text Editor Framework

> Build custom rich text editors with a modular, extensible framework on ProseMirror. Works with React, Vue, and more. 36K+ stars.

## Install

Save as a script file and run:

# Tiptap — Headless Rich Text Editor Framework

## Quick Use

```bash
npm install @tiptap/core @tiptap/pm @tiptap/starter-kit @tiptap/react
```

```tsx
import { useEditor, EditorContent } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';

function MyEditor() {
    const editor = useEditor({
        extensions: [StarterKit],
        content: '<p>Hello World!</p>',
    });

    return <EditorContent editor={editor} />;
}
```

With AI autocomplete:
```bash
npm install @tiptap/extension-ai
```

```tsx
import AI from '@tiptap/extension-ai';

const editor = useEditor({
    extensions: [
        StarterKit,
        AI.configure({ provider: 'openai', apiKey: '...' }),
    ],
});
```

---

## Intro

Tiptap is the leading headless rich text editor framework with 36,000+ GitHub stars, built on ProseMirror. "Headless" means full control over the UI — Tiptap handles the editing logic while you design the interface. With 100+ extensions (tables, code blocks, collaboration, mentions, AI autocomplete), framework adapters (React, Vue, Svelte, Angular), and a modular architecture, Tiptap powers editors in Notion-like apps, CMS platforms, email builders, and AI writing tools. Used by GitLab, Substack, and thousands of products.

Works with: React, Vue, Svelte, Angular, vanilla JS, any frontend framework. Best for developers building custom content editors, AI writing tools, or collaborative editing features. Setup time: under 3 minutes.

---

## Tiptap Architecture

### Headless = Full Control

```
Tiptap (logic layer)
  ├─ Document model (ProseMirror)
  ├─ Extensions (100+)
  ├─ Commands & keyboard shortcuts
  └─ Event system

Your UI (presentation layer)
  ├─ Custom toolbar
  ├─ Custom bubble menu
  ├─ Custom floating menu
  └─ Your design system
```

### Extensions (100+)

| Category | Extensions |
|----------|------------|
| **Basics** | Bold, Italic, Underline, Strike, Code |
| **Blocks** | Heading, Paragraph, Blockquote, CodeBlock, HorizontalRule |
| **Lists** | BulletList, OrderedList, TaskList, ListItem |
| **Tables** | Table, TableRow, TableCell, TableHeader |
| **Media** | Image, YouTube, Iframe |
| **Marks** | Link, Highlight, TextStyle, Color, Subscript, Superscript |
| **Collaboration** | Collaboration (Y.js), CollaborationCursor |
| **AI** | AI autocomplete, AI commands |
| **Advanced** | Mention, Placeholder, CharacterCount, Typography, UniqueID |

### Custom Extensions

```typescript
import { Extension } from '@tiptap/core';

const MyExtension = Extension.create({
    name: 'myExtension',
    addCommands() {
        return {
            insertAIBlock: () => ({ commands }) => {
                return commands.insertContent({
                    type: 'aiBlock',
                    content: [{ type: 'text', text: 'AI generated...' }],
                });
            },
        };
    },
});
```

### Real-Time Collaboration

```typescript
import Collaboration from '@tiptap/extension-collaboration';
import CollaborationCursor from '@tiptap/extension-collaboration-cursor';
import * as Y from 'yjs';
import { WebsocketProvider } from 'y-websocket';

const ydoc = new Y.Doc();
const provider = new WebsocketProvider('ws://localhost:1234', 'doc-id', ydoc);

const editor = useEditor({
    extensions: [
        StarterKit.configure({ history: false }),
        Collaboration.configure({ document: ydoc }),
        CollaborationCursor.configure({ provider }),
    ],
});
```

### Framework Adapters

```bash
# React
npm install @tiptap/react

# Vue
npm install @tiptap/vue-3

# Svelte
npm install @tiptap/svelte

# Angular
npm install @tiptap/angular
```

---

## FAQ

**Q: What is Tiptap?**
A: Tiptap is a headless rich text editor framework with 36,000+ GitHub stars built on ProseMirror. 100+ extensions, framework adapters for React/Vue/Svelte/Angular, and full UI control.

**Q: How is Tiptap different from Quill or Slate?**
A: Tiptap is headless (you control the UI), built on ProseMirror (proven document model), and has the largest extension ecosystem (100+). Quill is opinionated with a fixed UI. Slate gives lower-level control but requires more work.

**Q: Is Tiptap free?**
A: The core library is open-source under MIT. Tiptap also offers paid extensions (collaboration server, AI features) and a cloud service.

---

## Source & Thanks

> Created by [Ueberdosis](https://github.com/ueberdosis). Licensed under MIT.
>
> [tiptap](https://github.com/ueberdosis/tiptap) — ⭐ 36,000+

---

<!-- ZH -->

## 快速使用

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

---

## 简介

Tiptap 是拥有 36,000+ GitHub stars 的无头富文本编辑器框架，基于 ProseMirror。100+ 扩展、支持 React/Vue/Svelte/Angular、完全控制 UI。用于构建自定义编辑器、AI 写作工具和协作编辑功能。

---

## 来源与感谢

> Created by [Ueberdosis](https://github.com/ueberdosis). Licensed under MIT.
>
> [tiptap](https://github.com/ueberdosis/tiptap) — ⭐ 36,000+


---
Source: https://tokrepo.com/en/workflows/9ae98130-66ee-48df-b9d8-d9950df9704f
Author: Script Depot