npm package: @shrayaix/novelai
Description: Notion-style WYSIWYG editor with AI-powered autocompletions
Latest version: 3.0.0

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

&lt;p align="center"&gt; An open-source Notion-style WYSIWYG editor with AI-powered autocompletions. &lt;/p&gt;

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

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

## Introduction

[Novel](https://novel.sh/) is a Notion-style WYSIWYG editor with AI-powered autocompletions.

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

&lt;br /&gt;

## Installation

To use Novel in a project, you can run the following command to install the `novel` [NPM package](https://www.npmjs.com/package/novel):

```
npm i novel
```

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

```jsx
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](https://github.com/steven-tey/novel/blob/main/packages/core/src/ui/editor/extensions/index.tsx). | `[]` |
| `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). | `{}` |
| `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
```

##