/
313
Sponsor

Getting Started

PreviousNext

Get started with editorcn packages in your project.

Prerequisites

  • React 18 or 19
  • A shadcn/ui setup with Tailwind CSS v4
  • Tiptap v2 or v3 (>=2.11.5 <4)

Choose your editor

editorcn offers two editor packages. Pick the one that fits your use case:

For rendering saved content read-only (blog posts, previews, chat history), see the Static Renderer.

Both packages can be installed either via npm or via the shadcn registry:

  • shadcn registry (recommended) copies the component source directly into your project (under components/), so you own and can customize the code. This is the preferred method since it gives you full control over styling and behavior.
  • npm installs the package as a regular dependency from the npm registry. Use this if you'd rather not vendor the component source into your repo.

Setup

Since the shadcn registry is the recommended install method, add the editorcn registry to your components.json first (skip this if you're installing via npm only):

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

Option 1: @editorcn/editor (Toolbar-style)

Install via the shadcn registry (recommended):

$ pnpm dlx shadcn@latest add @editorcn/editor

Or install via npm:

$ pnpm add @editorcn/editor @tiptap/react @tiptap/pm @tiptap/starter-kit @tiptap/extension-link @tiptap/extension-underline @tiptap/extension-character-count @tiptap/extension-text-style @tiptap/extension-color @tiptap/extension-highlight

Import the styles:

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

Order matters: Import your shadcn globals first, then the editor styles.

"use client";
 
import { useEditor } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import Underline from "@tiptap/extension-underline";
import TextAlign from "@tiptap/extension-text-align";
import Placeholder from "@tiptap/extension-placeholder";
import TextStyle from "@tiptap/extension-text-style";
import Color from "@tiptap/extension-color";
import Highlight from "@tiptap/extension-highlight";
import { CharacterCount } from "@tiptap/extension-character-count";
import { RichTextEditor, Link } from "@/components/editor";
import "@/components/editor/style.css";
 
export function MyEditor() {
  const editor = useEditor({
    immediatelyRender: false,
    shouldRerenderOnTransaction: false,
    extensions: [
      StarterKit.configure({ heading: { levels: [1, 2, 3, 4, 5, 6] } }),
      Link,
      Underline,
      TextAlign.configure({ types: ["heading", "paragraph"] }),
      Placeholder.configure({ placeholder: "Start typing..." }),
      CharacterCount,
      TextStyle,
      Color,
      Highlight.configure({ multicolor: true }),
    ],
    content: "<p>Start typing...</p>",
  });
 
  return (
    <RichTextEditor editor={editor}>
      <RichTextEditor.Toolbar sticky>
        <RichTextEditor.ControlsGroup>
          <RichTextEditor.Bold />
          <RichTextEditor.Italic />
          <RichTextEditor.Underline />
          <RichTextEditor.Strikethrough />
          <RichTextEditor.Code />
          <RichTextEditor.ClearFormatting />
        </RichTextEditor.ControlsGroup>
 
        <RichTextEditor.ControlsGroup>
          <RichTextEditor.H1 />
          <RichTextEditor.H2 />
          <RichTextEditor.H3 />
        </RichTextEditor.ControlsGroup>
 
        <RichTextEditor.ControlsGroup>
          <RichTextEditor.BulletList />
          <RichTextEditor.OrderedList />
          <RichTextEditor.Blockquote />
          <RichTextEditor.Hr />
        </RichTextEditor.ControlsGroup>
 
        <RichTextEditor.ControlsGroup>
          <RichTextEditor.AlignLeft />
          <RichTextEditor.AlignCenter />
          <RichTextEditor.AlignRight />
        </RichTextEditor.ControlsGroup>
 
        <RichTextEditor.ControlsGroup>
          <RichTextEditor.Link />
          <RichTextEditor.Unlink />
        </RichTextEditor.ControlsGroup>
 
        <RichTextEditor.ControlsGroup>
          <RichTextEditor.Undo />
          <RichTextEditor.Redo />
        </RichTextEditor.ControlsGroup>
      </RichTextEditor.Toolbar>
 
      <RichTextEditor.BubbleMenu editor={editor} />
 
      <RichTextEditor.Content />
      <RichTextEditor.Footer showWordCount />
    </RichTextEditor>
  );
}

Option 2: @editorcn/block-editor (Blocks-style)

Install via the shadcn registry (recommended):

$ pnpm dlx shadcn@latest add @editorcn/block-editor

Or install via npm:

$ pnpm add @editorcn/block-editor @tiptap/react @tiptap/pm @tiptap/starter-kit @tiptap/suggestion @tiptap/extension-drag-handle-react @tiptap/extension-link @tiptap/extension-underline @tiptap/extension-placeholder @tiptap/extension-text-style @tiptap/extension-color @tiptap/extension-highlight

Import the styles:

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

See the @editorcn/editor docs or @editorcn/block-editor docs for detailed API references.

Peer dependencies

All @tiptap/* packages are peer dependencies — you must install them in your project. This ensures a single copy of Tiptap's types and avoids "duplicate instance" TypeScript errors.

This applies regardless of install method: npm installs list them explicitly as shown above, and the shadcn registry installer will prompt you to add any peer dependencies it detects are missing.