Novel — Notion-Style AI Editor Component

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:

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

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.