@shrayaix/novelai NPM

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

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

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

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