# Novel  | An Open Source Notion Style WYSIWYG Editor With AI Autocompletions

**URL:** <https://onehack.st/t/novel-an-open-source-notion-style-wysiwyg-editor-with-ai-autocompletions/295461>\
**Category:** Tools & Scripts\
**Tags:** programming, ai\
**Created:** [November 10, 2024, 9:57am UTC](https://onehack.st/t/novel-an-open-source-notion-style-wysiwyg-editor-with-ai-autocompletions/295461 "2024-11-10T09:57:47Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![WhiteHat](https://onehack.st/user_avatar/onehack.st/whitehat/32/162514_2.png) [@WhiteHat](https://onehack.st/u/WhiteHat)\
**Post date:** [November 10, 2024, 9:57am UTC](https://onehack.st/t/novel-an-open-source-notion-style-wysiwyg-editor-with-ai-autocompletions/295461/1 "2024-11-10T09:57:47Z")

</div>

[![Novel is a Notion-style WYSIWYG editor with AI-powered autocompletions.](https://camo.githubusercontent.com/9d8fb018358caf731db416f2def9b59937f028eb12fa029b665bb1cbf31243e5/68747470733a2f2f6e6f76656c2e73682f6f70656e67726170682d696d6167652e706e67)](https://novel.sh/)

# Novel

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

[![Hacker News](https://camo.githubusercontent.com/c04a43e1e127cd3d126832c6e28f87b15ff5ffbb98329a14553895472ada639f/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4861636b65722532304e6577732d3336392d253233464636363030)](https://news.ycombinator.com/item?id=36360789) [![License](https://camo.githubusercontent.com/0ca76d88b3b711dfc762760a436d4dffa3d965b54d8a7004d9a14dc0c63762f7/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f73746576656e2d7465792f6e6f76656c3f6c6162656c3d6c6963656e7365266c6f676f3d67697468756226636f6c6f723d663830266c6f676f436f6c6f723d666666) ](https://github.com/steven-tey/novel/blob/main/LICENSE)[![Novel.sh's GitHub repo](https://camo.githubusercontent.com/f4605e903cab7133bf64675dcab41d6a507ba23ddf27d7ffb120619701929363/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f73746172732f73746576656e2d7465792f6e6f76656c3f7374796c653d736f6369616c)](https://github.com/steven-tey/novel)

[**Introduction**](https://github.com/steven-tey/novel#introduction) · [**Deploy Your Own**](https://github.com/steven-tey/novel#deploy-your-own) · [**Setting Up Locally**](https://github.com/steven-tey/novel#setting-up-locally) · [**Tech Stack**](https://github.com/steven-tey/novel#tech-stack) · [**Contributing**](https://github.com/steven-tey/novel#contributing) · [**License**](https://github.com/steven-tey/novel#license)

## Docs (WIP)

> **[Introduction - Novel Docs](https://novel.sh/docs/introduction)**
>
> Novel is a headless Notion-style WYSIWYG editor

## Introduction

[Novel](https://novel.sh/) is a Notion-style WYSIWYG editor with AI-powered autocompletions.

Novel.mp4

## Deploy Your Own

You can deploy your own version of Novel to Vercel with one click:

[![Deploy with Vercel](https://camo.githubusercontent.com/20bea215d35a4e28f2c92ea5b657d006b087687486858a40de2922a4636301ab/68747470733a2f2f76657263656c2e636f6d2f627574746f6e)](https://stey.me/novel-deploy)

## Setting Up Locally

To set up Novel locally, you’ll need to clone the repository and set up the following environment variables:

- `OPENAI_API_KEY` – your OpenAI API key (you can get one [here](https://platform.openai.com/account/api-keys))
- `BLOB_READ_WRITE_TOKEN` – your Vercel Blob read/write token (currently [still in beta](https://vercel.com/docs/storage/vercel-blob/quickstart#quickstart), but feel free to [sign up on this form](https://vercel.fyi/blob-beta) for access)

If you’ve deployed this to Vercel, you can also use [`vc env pull`](https://vercel.com/docs/cli/env#exporting-development-environment-variables) to pull the environment variables from your Vercel project.

To run the app locally, you can run the following commands:

```auto
pnpm i
pnpm dev

```

## Cross-framework support

While Novel is built for React, we also have a few community-maintained packages for non-React frameworks:

- Svelte: [https://novel.sh/svelte](https://novel.sh/svelte)
- Vue: [https://novel.sh/vue](https://novel.sh/vue)

## VSCode Extension

Thanks to @bennykok, Novel also has a VSCode Extension: [https://novel.sh/vscode](https://novel.sh/vscode)

CleanShot.2023-09-02.at.09.36.03.mp4

## Tech Stack

Novel is built on the following stack:

- [Next.js](https://nextjs.org/) – framework
- [Tiptap](https://tiptap.dev/) – text editor
- [OpenAI](https://openai.com/) - AI completions
- [Vercel AI SDK](https://sdk.vercel.ai/docs) – AI library
- [Vercel](https://vercel.com/) – deployments
- [TailwindCSS](https://tailwindcss.com/) – styles
- [Cal Sans](https://github.com/calcom/font) – font

## GitHub:

[https://github.com/steven-tey/novel](https://github.com/steven-tey/novel)