Fork of Novel.sh. Its lightweight, with custom uploader! Lot more coming soon!
Introduction · Installation · Deploy Your Own · Setting Up Locally · Tech Stack · Contributing · License
Novel is a Notion-style WYSIWYG editor with AI-powered autocompletions by Steven-tey. This is a fork with the aim of removing Vercel-blob, analytics so that your WYSIWYG editor remains lightweight!
To use Novel in a project, you can run the following command to install the novel
NPM package:
npm i novel-lightweight
Then, you can use it in your code like this:
import { Editor } from "novel-lightweight";
export default function App() {
const [data, setData] = useState("");
return (
<Editor
defaultValue={data}
disableLocalStorage={true}
onUpdate={(editor) => {
setData(editor?.storage.markdown.getMarkdown());
}}
handleImageUpload={async (file) => {
const uploads = await startUpload([file]);
if (uploads && uploads.length > 0) {
return uploads[0].url;
}
return "www.example.com/failed-upload.png";
}}
/>
);
}
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 |
disableLocalStorage |
boolean |
Enabling this option will prevent read/write content from/to local storage. | false |
handleImageUpload |
(file:File)=>Promise<string> |
[Optional] You can have your custom upload handler for images added. Takes in File as input and should return a promise which resolves to the url of the image | null |
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 set up Novel locally, you'll need to clone the repository and set up the following environment variables:
- [OPTIONAL]
OPENAI_API_KEY
– your OpenAI API key (you can get one here) - [OPTIONAL]
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
Novel is built on the following stack:
- Next.js – framework
- Tiptap – text editor
- OpenAI - AI completions
- Vercel AI SDK – AI library
- TailwindCSS – styles
- Cal Sans – font
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.
Licensed under the Apache-2.0 license.