<a href="https://novel.sh"> <img alt="Novel is a Notion-style WYSIWYG editor with AI-powered autocompletions." src="https://novel.sh/opengraph-image.png"> <h1 align="center">Novel</h1> </a>

<p align="center"> An open-source Notion-style WYSIWYG editor with AI-powered autocompletions. </p>

<p align="center"> <a href="https://news.ycombinator.com/item?id=36360789"><img src="https://img.shields.io/badge/Hacker%20News-369-%23FF6600" alt="Hacker News"></a> <a href="https://github.com/steven-tey/novel/blob/main/LICENSE"> <img src="https://img.shields.io/github/license/steven-tey/novel?label=license&logo=github&color=f80&logoColor=fff" alt="License" /> </a> <a href="https://github.com/steven-tey/novel"><img src="https://img.shields.io/github/stars/steven-tey/novel?style=social" alt="Novel.sh's GitHub repo"></a> </p>

<p align="center"> <a href="#introduction"><strong>Introduction</strong></a> · <a href="#installation"><strong>Installation</strong></a> · <a href="#deploy-your-own"><strong>Deploy Your Own</strong></a> · <a href="#setting-up-locally"><strong>Setting Up Locally</strong></a> · <a href="#tech-stack"><strong>Tech Stack</strong></a> · <a href="#contributing"><strong>Contributing</strong></a> · <a href="#license"><strong>License</strong></a> </p> <br/>

Introduction

Novel is a Notion-style WYSIWYG editor with AI-powered autocompletions.

https://github.com/steven-tey/novel/assets/28986134/2099877f-4f2b-4b1c-8782-5d803d63be5c

<br />

Installation

To use Novel in a project, you can run the following command to install the novel NPM package:

npm i novel

Then, you can use it in your code like this:

import { Editor } from "novel";

export default function App() {
  return <Editor />;
}

The Editor is a React component that takes in the following props:

| Prop | Type | Description | Default | | --- | --- | --- | --- | | completionApi | string | The API route to use for the OpenAI completion API. | /api/generate | | className | string | Editor container classname. | "relative min-h-[500px] w-full max-w-screen-lg border-stone-200 bg-white sm:mb-[calc(20vh)] sm:rounded-lg sm:border sm:shadow-lg" | | defaultValue | JSONContent or string | The default value to use for the editor. | defaultEditorContent | | extensions | Extension[] | A list of extensions to use for the editor, in addition to the default Novel extensions. | [] | | editorProps | EditorProps | Props to pass to the underlying Tiptap editor, in addition to the default Novel editor props. | {} | | onUpdate | (editor?: Editor) => void | A callback function that is called whenever the editor is updated. | () => {} | | onDebouncedUpdate | (editor?: Editor) => void | A callback function that is called whenever the editor is updated, but only after the defined debounce duration. | () => {} | | debounceDuration | number | The duration (in milliseconds) to debounce the onDebouncedUpdate callback. | 750 | | storageKey | string | The key to use for storing the editor's value in local storage. | novel__content |

Note: Make sure to define an API endpoint that matches the completionApi prop (default is /api/generate). This is needed for the AI autocompletions to work. Here's an example: https://github.com/steven-tey/novel/blob/main/apps/web/app/api/generate/route.ts

Here's an example application: https://github.com/steven-tey/novella

To run the app locally, you can run the following commands:

pnpm i
pnpm build
pnpm dev