/
38
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:

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

Import the styles:

import "@editorcn/editor/style.css";

If you installed via the shadcn registry, the package is copied into your project, so import from your local components path instead of @editorcn/editor:

  import { RichTextEditor, Link } from '@/components/editor';
  import "@/components/editor/style.css";
"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 { RichTextEditor, Link } from "@editorcn/editor";
import "@editorcn/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..." }),
    ],
    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.Content />
    </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

Import the styles:

import "@editorcn/block-editor/style.css";

If you installed via the shadcn registry, the package is copied into your project, so import from your local components path instead of @editorcn/block-editor:

import {
BlockEditor,
SlashCommand,
defaultSlashCommandItems,
getSlashCommandSuggestion,
} from '@/components/block-editor';
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 "@editorcn/block-editor";
import "@editorcn/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.