Quickstart - Novel Docs

Installation

Novel package doeesn’t have any styles included. It’s just a collection of custom configs and components for Tiptap.

npm i novel

yarn add novel

pnpm add novel

Usage

Tailwind

Usage with Tailwind and Shadcn-UI

Custom

Write your own styles using the Novel components

Anatomy

This is mostly how you would use the editor in your application. Similar to Radix Primitives, Novel exports a set of components that you can use to build your own editor.

import {
  EditorBubble,
  EditorBubbleItem,
  EditorCommand,
  EditorCommandItem,
  EditorContent,
  EditorRoot,
} from "novel";

export default () => (
  <EditorRoot>
    <EditorContent>
      <EditorCommand>
        <EditorCommandItem />
        <EditorCommandItem />
        <EditorCommandItem />
      </EditorCommand>
      <EditorBubble>
        <EditorBubbleItem />
        <EditorBubbleItem />
        <EditorBubbleItem />
      </EditorBubble>
    </EditorContent>
  </EditorRoot>
);