\n \n\n## Introduction\n\n[Novel](https://novel.sh/) is a Notion-style WYSIWYG editor with AI-powered autocompletions.\n\nhttps://github.com/steven-tey/novel/assets/28986134/2099877f-4f2b-4b1c-8782-5d803d63be5c\n\n \n\n## Installation\n\nTo use Novel in a project, you can run the following command to install the `novel` [NPM package](https://www.npmjs.com/package/novel):\n\n```\nnpm i novel\n```\n\nThen, you can use it in your code like this:\n\n```jsx\nimport { Editor } from \"novel\";\n\nexport default function App() {\n return ;\n}\n```\n\nThe `Editor` is a React component that takes in the following props:\n\n| Prop | Type | Description | Default |\n| --------------------- | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------- |\n| `completionApi` | `string` | The API route to use for the OpenAI completion API. | `/api/generate` |\n| `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\"` |\n| `defaultValue` | `JSONContent` or `string` | The default value to use for the editor. | [`defaultEditorContent`](https://github.com/steven-tey/novel/blob/main/packages/core/src/ui/editor/default-content.tsx) |\n| `extensions` | `Extension[]` | A list of extensions to use for the editor, in addition to the [default Novel extensions](https://github.com/steven-tey/novel/blob/main/packages/core/src/ui/editor/extensions/index.tsx). | `[]` |\n| `editorProps` | `EditorProps` | Props to pass to the underlying Tiptap editor, in addition to the [default Novel editor props](https://github.com/steven-tey/novel/blob/main/packages/core/src/ui/editor/props.ts). | `{}` |\n| `onUpdate` | `(editor?: Editor) => void` | A callback function that is called whenever the editor is updated. | `() => {}` |\n| `onDebouncedUpdate` | `(editor?: Editor) => void` | A callback function that is called whenever the editor is updated, but only after the defined debounce duration. | `() => {}` |\n| `debounceDuration` | `number` | The duration (in milliseconds) to debounce the `onDebouncedUpdate` callback. | `750` |\n| `storageKey` | `string` | The key to use for storing the editor's value in local storage. | `novel__content` |\n| `disableLocalStorage` | `boolean` | Enabling this option will prevent read/write content from/to local storage. | `false` |\n\n> **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\n\nHere's an example application: https://github.com/steven-tey/novella\n\n## Deploy Your Own\n\nYou can deploy your own version of Novel to Vercel with one click:\n\n[](https://stey.me/novel-deploy)\n\n## Setting Up Locally\n\nTo set up Novel locally, you'll need to clone the repository and set up the following environment variables:\n\n- `OPENAI_API_KEY` – your OpenAI API key (you can get one [here](https://platform.openai.com/account/api-keys))\n- `BLOB_READ_WRITE_TOKEN` – your Vercel Blob read/write token (currently [still in beta](https://vercel.com/docs/storage/vercel-blob/quickstart#quickstart), but feel free to [sign up on this form](https://vercel.fyi/blob-beta) for access)\n\nIf you've deployed this to Vercel, you can also use [`vc env pull`](https://vercel.com/docs/cli/env#exporting-development-environment-variables) to pull the environment variables from your Vercel project.\n\nTo run the app locally, you can run the following commands:\n\n```\npnpm i\npnpm build\npnpm dev\n```\n\n## Cross-framework support\n\nWhile Novel is built for React, we also have a few community-maintained packages for non-React frameworks:\n\n- Svelte: https://novel.sh/svelte\n- Vue: https://novel.sh/vue\n\n## VSCode Extension\n\nThanks to @bennykok, Novel also has a VSCode Extension: https://novel.sh/vscode\n\nhttps://github.com/steven-tey/novel/assets/28986134/58ebf7e3-cdb3-43df-878b-119e304f7373\n\n## Tech Stack\n\nNovel is built on the following stack:\n\n- [Next.js](https://nextjs.org/) – framework\n- [Tiptap](https://tiptap.dev/) – text editor\n- [OpenAI](https://openai.com/) - AI completions\n- [Vercel AI SDK](https://sdk.vercel.ai/docs) – AI library\n- [Vercel](https://vercel.com) – deployments\n- [TailwindCSS](https://tailwindcss.com/) – styles\n- [Cal Sans](https://github.com/calcom/font) – font\n\n## Contributing\n\nHere's how you can contribute:\n\n- [Open an issue](https://github.com/steven-tey/novel/issues) if you believe you've encountered a bug.\n- Make a [pull request](https://github.com/steven-tey/novel/pull) to add new features/make quality-of-life improvements/fix bugs.\n\n\n \n\n\n## Repo Activity\n\n\n\n## License\n\nLicensed under the [Apache-2.0 license](https://github.com/steven-tey/novel/blob/main/LICENSE.md).\n","readmeFilename":"README.md"}
![\"Novel](\"https://novel.sh/opengraph-image.png\")
\n ![\"Hacker](\"https://img.shields.io/badge/Hacker%20News-369-%23FF6600\"){kind=icon}
![\"License\"](\"https://img.shields.io/github/license/steven-tey/novel?label=license&logo=github&color=f80&logoColor=fff\")
![\"Novel.sh's](\"https://img.shields.io/github/stars/steven-tey/novel?style=social\")