Colabo Editor

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

Introduction · Installation · Tech Stack · Contributing · License

Introduction

Colabo Editor is a Notion-style WYSIWYG editor with AI-powered autocompletions.

Installation

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

Tech Stack

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

Contributing

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.