For AI agents: the documentation index is at /llms.txt, and any docs page is available as Markdown by appending .md to its URL.

Editor

Verified

A block editor on Tiptap: headings, lists, task lists, quotes, code, links, and highlights, styled for reading.

When to use

Use when: A rich-text document: headings, lists, tasks, quotes, code, and links in one place.
Avoid when: A single-line field or short message; use Textarea or Composer.

Installation

bunx shelf add editor

The source lands in src/components/ui/editor.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

import * as Editor from "@/components/ui/editor";
import { EditorBubbleMenu } from "@/components/ui/editor-bubble-menu";

<Editor.Root aria-label="Document" defaultValue="<p>Hello</p>" placeholder="Write, or press / for commands">
  <Editor.Content />
  <EditorBubbleMenu />
</Editor.Root>

Built on

Packages: @stylexjs/stylex, @tiptap/core, @tiptap/extension-heading, @tiptap/extension-highlight, @tiptap/extension-task-item, @tiptap/extension-task-list, @tiptap/extensions, @tiptap/pm, @tiptap/react, @tiptap/starter-kit
Shelf items: Checkbox, foundations, Icons, utils
Figma: Optional native Figma library. See Designers.

Verified

Size: 4.5 kB gzipped on its own, 142 kB with the Shelf items and packages it builds on. JS and CSS in a production build, without React.
Accessibility: Axe passes on 5 stories
Behavior: 5 interaction tests in Storybook
React Compiler: Compiles with React Compiler
React Doctor: React Doctor finds nothing