Registry

Editorcn packages are available as a shadcn registry, allowing you to install the source code directly into your project using the shadcn CLI. This is the recommended way to install editorcn packages — it copies the editor source straight into your project so you have full control over styling and behavior, rather than depending on a published node_modules package.

If you'd rather install from npm instead, see npm vs registry below for the tradeoffs.

Setup

Add the editorcn registry to your components.json:

Copy{
  "$schema": "https://ui.shadcn.com/schema/registry.json",
  "registries": {
    "@editorcn": "https://editorcn.vercel.app/r/{name}.json"
  }
}

Available packages

Usage

After installation, the editor source files are in your project at components/editor/ (or components/block-editor/ for the block editor).

1. Import styles

Import the editor styles alongside your shadcn globals:

Copy// Your shadcn globals
import "@/app/globals.css";
 
// Editor styles
import "@/components/editor/style.css";

For the block editor:

Copyimport "@/components/block-editor/style.css";

2. Install peer dependencies

The @tiptap/* packages are peer dependencies. The shadcn CLI will prompt you to install any it detects as missing, but you can also add them yourself:

$ pnpm add @tiptap/react @tiptap/pm @tiptap/starter-kit @tiptap/extension-link @tiptap/extension-underline

See the Editor or Block Editor docs for the full list of extensions.

3. Use the components

Rich text editor:

Copy"use client";
 
import { useEditor } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import Placeholder from "@tiptap/extension-placeholder";
import { RichTextEditor, Link } from "@/components/editor";
 
function MyEditor() {
  const editor = useEditor({
    immediatelyRender: false,
    extensions: [
      StarterKit,
      Link,
      Placeholder.configure({ placeholder: "Start typing..." }),
    ],
  });
 
  return (
    <RichTextEditor editor={editor}>
      <RichTextEditor.Toolbar sticky>
        <RichTextEditor.ControlsGroup>
          <RichTextEditor.Bold />
          <RichTextEditor.Italic />
          <RichTextEditor.Underline />
        </RichTextEditor.ControlsGroup>
      </RichTextEditor.Toolbar>
      <RichTextEditor.Content />
    </RichTextEditor>
  );
}

Block editor:

Copy"use client";
 
import { useEditor } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import Placeholder from "@tiptap/extension-placeholder";
import {
  BlockEditor,
  SlashCommand,
  defaultSlashCommandItems,
  getSlashCommandSuggestion,
} from "@/components/block-editor";
 
function MyBlockEditor() {
  const editor = useEditor({
    immediatelyRender: false,
    extensions: [
      StarterKit.configure({ heading: { levels: [1, 2, 3] } }),
      Placeholder.configure({ placeholder: "Type / for commands..." }),
      SlashCommand.configure({
        suggestion: getSlashCommandSuggestion(defaultSlashCommandItems),
      }),
    ],
  });
 
  return <BlockEditor editor={editor} />;
}

For the full API reference, props, and customization options, see the Editor and Block Editor pages.

How it works

The registry is served as static JSON files from https://editorcn.vercel.app/r/:

• registry.json — catalog listing all available packages with metadata
• editor.json — item schema for the toolbar editor (18 files, 17 dependencies)
• block-editor.json — item schema for the block editor (19 files, 26 dependencies)

When you run shadcn add @editorcn/editor, the CLI:

1. Fetches https://editorcn.vercel.app/r/editor.json
2. Reads the files array to know which source files to install
3. Copies each file's content into your project at the configured paths
4. Installs all dependencies into your project

npm vs registry

Use the registry unless you have a specific reason to prefer a versioned npm dependency (for example, pinning to an exact release in a monorepo with strict dependency management).

Source

The registry is built from the same source as the npm packages. See scripts/build-registry.mjs for the build script.