Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?


Failed to load latest commit information.
Latest commit message
Commit time
September 3, 2023 16:50
September 4, 2023 15:04
September 4, 2023 14:25
September 13, 2023 15:15

Novel Vue

Novel Vue is port of Novel


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


To use Novel Vue in a project, you can run the following command to install the novel-vue NPM package:

npm i novel-vue

Then, you can use it in your code like this:

  <Editor />

<script setup lang="ts">
import { Editor } from "novel-vue";
import "novel-vue/dist/style.css";
Prop Type Description Default
completionApi String The API route to use for the OpenAI completion API. "/api/generate"
className String Additional classes to add to the editor container. "relative min-h-500px] w-full mx-auto max-w-screen-lg border-stone-200 bg-white p-12 px-8 sm:mb-[calc(20vh)] sm:rounded-lg sm:border sm:px-12 sm:shadow-lg"
defaultValue JSONContent 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 Function A callback function that is called whenever the editor is updated. () => {}
onDebouncedUpdate Function 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"

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:

Projects using Novel Vue

Novuel: Open Source AI Writing App built with Nuxt 3 and Nuxt UI


Notion-style WYSIWYG editor with AI-powered autocompletion in Vue






No releases published


No packages published