Novel — Notion-Style AI Editor Component

What it is

Novel is an open-source WYSIWYG editor component for React that provides a Notion-like editing experience with AI-powered autocompletion. It includes slash commands for inserting blocks, a bubble menu for formatting selections, and an AI completion feature that generates text inline. Built on Tiptap and ProseMirror.

It targets developers building applications that need a rich text editor with a modern, Notion-style interface and optional AI writing assistance.

How it saves time or tokens

Novel provides a production-ready editor component that would take weeks to build from scratch. Instead of configuring Tiptap, building a slash command system, designing a bubble menu, and integrating AI completion, you install Novel and get all of these features. The AI completion connects to your own API endpoint, so you control the model and costs.

How to use

1. Install the package:

npm install novel

1. Drop into your React app:

import { Editor } from 'novel';

export default function Page() {
    return (
        <Editor
            defaultValue={initialContent}
            onUpdate={(editor) => {
                console.log(editor.getJSON());
            }}
        />
    );
}

1. Configure AI completion with your own endpoint:

<Editor
    completionApi="/api/generate"
    defaultValue={initialContent}
/>

Example

import { Editor } from 'novel';
import { useState } from 'react';

export default function DocumentEditor() {
    const [content, setContent] = useState({});
    const [saving, setSaving] = useState(false);
    
    const handleSave = async () => {
        setSaving(true);
        await fetch('/api/documents', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ content })
        });
        setSaving(false);
    };
    
    return (
        <div>
            <button onClick={handleSave}>
                {saving ? 'Saving...' : 'Save'}
            </button>
            <Editor
                completionApi="/api/ai/complete"
                defaultValue={{}}
                onUpdate={(editor) => setContent(editor.getJSON())}
                className="min-h-[500px] border rounded p-4"
            />
        </div>
    );
}

Related on TokRepo

• AI tools for content -- Content creation and editing tools
• Featured workflows -- Curated developer tools and components

Common pitfalls

• The AI completion feature requires a server-side API endpoint that streams text. The endpoint must return a ReadableStream for the inline typing effect to work.
• Novel is built for React. Vue, Svelte, and vanilla JS are not supported directly. For other frameworks, use Tiptap directly.
• Customizing the editor beyond the provided options requires understanding the underlying Tiptap and ProseMirror architecture.