Novel

An open-source Notion-style WYSIWYG editor with AI-powered autocompletions.

Introduction · Installation · Deploy Your Own · Setting Up Locally · Tech Stack · Contributing · License

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

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

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

> 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

Deploy Your Own

You can deploy your own version of Novel to Vercel with one click:

Setting Up Locally

To set up Novel locally, you'll need to clone the repository and set up the following environment variables:

• OPENAI_API_KEY – your OpenAI API key (you can get one here)
• BLOB_READ_WRITE_TOKEN – your Vercel Blob read/write token (currently still in beta, but feel free to sign up on this form for access)

If you've deployed this to Vercel, you can also use vc env pull to pull the environment variables from your Vercel project.

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

pnpm i
pnpm build
pnpm dev

Cross-framework support

While Novel is built for React, we also have a few community-maintained packages for non-React frameworks:

• Svelte: https://novel.sh/svelte
• Vue: https://novel.sh/vue

VSCode Extension

Thanks to @bennykok, Novel also has a VSCode Extension: https://novel.sh/vscode

https://github.com/steven-tey/novel/assets/28986134/58ebf7e3-cdb3-43df-878b-119e304f7373

Tech Stack

Novel is built on the following stack:

• Next.js – framework
• Tiptap – text editor
• OpenAI - AI completions
• Vercel AI SDK – AI library
• Vercel – deployments
• TailwindCSS – styles
• Cal Sans – font

Contributing

Here's how you can contribute:

• Open an issue if you believe you've encountered a bug.
• Make a pull request to add new features/make quality-of-life improvements/fix bugs.

Repo Activity

License

Licensed under the Apache-2.0 license.