An open-source Notion-style WYSIWYG editor with AI-powered autocompletions.
Introduction · Installation · Tech Stack · Contributing · License
Colabo Editor is a Notion-style WYSIWYG editor with AI-powered autocompletions.
To use Colabo Editor in a project, you can run the following command to install the Colabo Editor
NPM package:
npm i colabo-editor
Then, you can use it in your code like this:
import { Editor } from "colabo-editor";
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 Colabo Editor extensions. | [] |
editorProps |
EditorProps |
Props to pass to the underlying Tiptap editor, in addition to the default Colabo Editor 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 |
Colabo Editor 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
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.