What is Novel — Notion-Style AI Editor Component?

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

Is Novel — Notion-Style AI Editor Component free to use?

Yes. Novel — Notion-Style AI Editor Component is freely available on TokRepo. Check the Source & Thanks section on the asset page for the specific open-source license.

How do I install Novel — Notion-Style AI Editor Component?

Visit the asset page on TokRepo and click "Copy for agent" to get the installation instructions. Most assets can be installed with a single command.

Novel — Notion-Style AI Editor Component

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

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()); }

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

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

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.