# Novel — Notion-Style AI Editor Component

> WYSIWYG editor with AI autocompletion, slash commands, and bubble menu. Drop into any React app. 16K+ GitHub stars.

## Install

Paste the prompt below into your AI tool:

# Novel — Notion-Style AI Editor Component

## Quick Use

```bash
npm install novel
```

```tsx
import { Editor } from 'novel';

export default function Page() {
    return (
        <Editor
            defaultValue={initialContent}
            onUpdate={(editor) => {
                const json = editor.getJSON();
                // Save to your backend
            }}
        />
    );
}
```

With AI autocompletion:
```tsx
import { Editor } from 'novel';

<Editor
    completionApi="/api/generate"  // Your OpenAI proxy endpoint
    defaultValue={initialContent}
/>
```

AI endpoint (`/api/generate`):
```typescript
import OpenAI from 'openai';

export async function POST(req: Request) {
    const { prompt } = await req.json();
    const openai = new OpenAI();
    const stream = await openai.chat.completions.create({
        model: 'gpt-4o',
        messages: [{ role: 'user', content: `Continue writing: ${prompt}` }],
        stream: true,
    });
    return new Response(stream.toReadableStream());
}
```

---

## Intro

Novel is a Notion-style WYSIWYG editor component with 16,100+ GitHub stars that you can drop into any React application. It features AI-powered autocompletion (press `++` to trigger), slash commands for block insertion, a bubble menu for inline formatting, and drag-and-drop content reordering. Built on Tiptap and ProseMirror, Novel provides the full Notion-like editing experience as a single React component. Used by Vercel, Cal.com, and hundreds of AI writing tools.

Works with: React, Next.js, any OpenAI-compatible API for AI features. Best for developers building AI writing tools, CMS, or note-taking apps who want a Notion-like editor without building one from scratch. Setup time: under 2 minutes.

---

## Novel Features

### AI Autocompletion

Type `++` at the end of a sentence and Novel streams AI-generated text:

```
User types: "The benefits of RAG include ++"
AI completes: "improved accuracy by grounding responses in retrieved
              documents, reduced hallucination, and the ability to
              leverage up-to-date information without retraining."
```

Powered by any OpenAI-compatible API endpoint you provide.

### Slash Commands

Type `/` to insert blocks:

| Command | Block |
|---------|-------|
| `/heading` | H1, H2, H3 |
| `/bullet` | Bullet list |
| `/number` | Numbered list |
| `/todo` | Checkbox list |
| `/quote` | Blockquote |
| `/code` | Code block |
| `/image` | Image upload |
| `/divider` | Horizontal rule |

### Bubble Menu

Select text to see formatting options:
- Bold, Italic, Underline, Strikethrough
- Link insertion
- Code inline
- Highlight

### Drag and Drop

Drag any block to reorder content — just like Notion.

### Customization

```tsx
import { Editor } from 'novel';
import { defaultExtensions } from 'novel/extensions';
import { slashCommand } from 'novel/plugins';

// Add custom extensions
const extensions = [
    ...defaultExtensions,
    MyCustomExtension,
];

// Custom slash commands
const commands = [
    ...defaultSlashCommands,
    { title: 'AI Summary', command: ({ editor }) => generateSummary(editor) },
];

<Editor extensions={extensions} slashCommand={commands} />
```

### Tailwind CSS Styling

Novel uses Tailwind CSS classes, making it easy to match your app's design system.

---

## FAQ

**Q: What is Novel?**
A: Novel is a Notion-style WYSIWYG editor component with 16,100+ GitHub stars featuring AI autocompletion, slash commands, bubble menu, and drag-and-drop. Drop into any React app.

**Q: How is Novel different from Tiptap?**
A: Tiptap is the underlying framework (headless, you build the UI). Novel is a ready-to-use component built on Tiptap with Notion-style UX and AI features included. Use Tiptap for full customization; use Novel for a quick, beautiful editor.

**Q: Is Novel free?**
A: Yes, open-source under Apache-2.0.

---

## Source & Thanks

> Created by [Steven Tey](https://github.com/steven-tey). Licensed under Apache-2.0.
>
> [novel](https://github.com/steven-tey/novel) — ⭐ 16,100+

---

<!-- ZH -->

## 快速使用

```bash
npm install novel
```

```tsx
import { Editor } from 'novel';
<Editor completionApi="/api/generate" />
```

---

## 简介

Novel 是一个拥有 16,100+ GitHub stars 的 Notion 风格 WYSIWYG 编辑器组件，内置 AI 自动补全、斜杠命令、气泡菜单和拖拽排序。基于 Tiptap 构建，一个 React 组件即可提供完整的 Notion 编辑体验。

---

## 来源与感谢

> Created by [Steven Tey](https://github.com/steven-tey). Licensed under Apache-2.0.
>
> [novel](https://github.com/steven-tey/novel) — ⭐ 16,100+


---
Source: https://tokrepo.com/en/workflows/1f0b3eee-75dd-476a-a118-026fd2db3916
Author: Prompt Lab