Skip to main content

​
Installation

Novel package doeesn’t have any styles included. It’s just a collection of custom configs and components for Tiptap. 
npm i 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>
);
⌘I