Novel is an open-source, Notion-style WYSIWYG editor with AI-powered autocompletions, built on Next.js and Tiptap for React developers.
What is Novel?
Novel is an open-source WYSIWYG editor that replicates the Notion editing experience and adds AI-powered autocomplete suggestions. It runs in the browser and is built for React, using Next.js as the framework and Tiptap as the underlying text editor. The editor accepts plain text and formatting commands and outputs rich documents with inline AI text suggestions. The project is maintained by Steven Tey, with the source hosted at github.com/steven-tey/novel and licensed under Apache-2.0.
Key Features
- Notion-style WYSIWYG editing — A rich text editor that renders formatting inline, replicating the Notion block-based writing experience in the browser.
- AI-powered autocompletions — Generates text suggestions as you type, powered by OpenAI's models and integrated via the Vercel AI SDK.
- React + Next.js stack — Built on Next.js with Tiptap for the editor core; styled with TailwindCSS and the Cal Sans font.
- One-click deploy — Deploy your own instance to Vercel with a single click, using the provided deploy button.
- Local development — Run the project locally with pnpm: clone the repo, set environment variables, and run
pnpm dev.
- Cross-framework support — Community-maintained packages are available for Svelte and Vue, alongside the core React package.
- VSCode extension — A companion extension lets you use Novel-style editing and AI autocompletions directly in Visual Studio Code.
- Open-source license — Licensed under Apache-2.0, with contribution via issues and pull requests on GitHub.
Who is it for?
- React developers — who want to integrate a Notion-like editor into their own apps or build a writing tool.
- Note-taking app builders — who need a WYSIWYG editor with AI suggestions for their product.
- Open-source contributors — who want to extend the editor or fork it for their own project.
- Content creators — who want a self-hosted writing environment with AI assistance.
What can you do with Novel?
- Build your own editor — Embed Novel as the editing layer in a React application, with built-in AI autocompletion.
- Deploy a personal writing tool — Set up a self-hosted editor on Vercel with your own OpenAI API key.
- Create a collaborative writing app — Combine Novel's editing capabilities with your own backend, since it's fully open-source and customizable.
- Use AI writing assistance — Let the editor suggest completions and continue your text using OpenAI models, directly in the editor.
How does Novel work?
To run Novel locally, clone the repository and install dependencies with pnpm. Set the environment variables OPENAI_API_KEY and BLOB_READ_WRITE_TOKEN, then run pnpm dev to start the editor on your local machine. Alternatively, use the one-click Vercel deploy button to host a production instance without any local setup.
Pros and cons
- Open-source — The project is free to use and modify under the Apache-2.0 license.
- One-click deploy — You can deploy to Vercel instantly.
- Cross-framework support — Svelte and Vue packages are available, maintained by the community.
- VSCode extension — Editors can use Novel directly in VSCode.
- Requires OpenAI API key — AI autocompletions need a valid OpenAI API key, and usage is billed by OpenAI.
- Vercel Blob is in beta — The storage service for image uploads is still in beta, so features may change.
Pricing
Novel is free and open-source. There are no paid tiers or subscriptions. To use AI autocompletions, you must supply your own OpenAI API key, and OpenAI bills you for API usage directly. Deployments to Vercel may also incur costs beyond the free tier, but the software itself has no price.
FAQ
Is Novel free?
Yes, Novel is open-source under the Apache-2.0 license and completely free to use. You will need your own OpenAI API key for AI autocompletions, and that usage is billed by OpenAI.
Does Novel work with Svelte or Vue?
Yes, community-maintained packages are available for both Svelte and Vue. The core package is built for React, so you'll need to use the community packages if you're working in Svelte or Vue.
Can I deploy Novel to Vercel?
Yes, there is a one-click deploy button that sets up Novel on Vercel. You can also run it locally with pnpm by setting the required environment variables.
What environment variables do I need?
You need an OPENAI_API_KEY from OpenAI for AI features and a BLOB_READ_WRITE_TOKEN from Vercel Blob for image uploads. These are set in your Vercel project or local environment.
Is there a VSCode extension?
Yes, Novel has a VSCode extension that brings the editor and AI autocompletions into Visual Studio Code.
