Getting Started
Get started with rtecn packages in your project.
Getting Started
Prerequisites
- React 18 or 19
- A shadcn/ui setup with Tailwind CSS v4
- Tiptap v2 or v3 (
>=2.11.5 <4)
Choose your editor
Rtecn offers two editor packages. Pick the one that fits your use case:
- @rtecn/editor — a classic toolbar-style rich text editor
- @rtecn/block-editor — a Notion-style block editor with slash commands
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 rtecn registry to your components.json first (skip this if you're installing via npm only):
{
"$schema": "https://ui.shadcn.com/schema/registry.json",
"registries": {
"@rtecn": "https://rtecn.space/r/{name}.json"
}
}Option 1: @rtecn/editor (Toolbar-style)
Install via the shadcn registry (recommended):
npx shadcn@latest add @rtecn/editoryarn dlx shadcn@latest add @rtecn/editorpnpm dlx shadcn@latest add @rtecn/editorbunx shadcn@latest add @rtecn/editorOr install via npm:
npm install @rtecn/editor @tiptap/react @tiptap/pm @tiptap/starter-kit @tiptap/extension-link @tiptap/extension-underlineyarn add @rtecn/editor @tiptap/react @tiptap/pm @tiptap/starter-kit @tiptap/extension-link @tiptap/extension-underlinepnpm add @rtecn/editor @tiptap/react @tiptap/pm @tiptap/starter-kit @tiptap/extension-link @tiptap/extension-underlinebun add @rtecn/editor @tiptap/react @tiptap/pm @tiptap/starter-kit @tiptap/extension-link @tiptap/extension-underlineImport the styles:
import "@rtecn/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 @rtecn/editor:
import { RichTextEditor, Link } from '@/components/rte-editor';
import "@/components/rte-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 "@rtecn/editor";
import "@rtecn/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: @rtecn/block-editor (Blocks-style)
Install via the shadcn registry (recommended):
npx shadcn@latest add @rtecn/block-editoryarn dlx shadcn@latest add @rtecn/block-editorpnpm dlx shadcn@latest add @rtecn/block-editorbunx shadcn@latest add @rtecn/block-editorOr install via npm:
npm install @rtecn/block-editor @tiptap/react @tiptap/pm @tiptap/starter-kit @tiptap/suggestion @tiptap/extension-drag-handle-react @tiptap/extension-link @tiptap/extension-underline @tiptap/extension-placeholderyarn add @rtecn/block-editor @tiptap/react @tiptap/pm @tiptap/starter-kit @tiptap/suggestion @tiptap/extension-drag-handle-react @tiptap/extension-link @tiptap/extension-underline @tiptap/extension-placeholderpnpm add @rtecn/block-editor @tiptap/react @tiptap/pm @tiptap/starter-kit @tiptap/suggestion @tiptap/extension-drag-handle-react @tiptap/extension-link @tiptap/extension-underline @tiptap/extension-placeholderbun add @rtecn/block-editor @tiptap/react @tiptap/pm @tiptap/starter-kit @tiptap/suggestion @tiptap/extension-drag-handle-react @tiptap/extension-link @tiptap/extension-underline @tiptap/extension-placeholderImport the styles:
import "@rtecn/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 @rtecn/block-editor:
import {
BlockEditor,
SlashCommand,
defaultSlashCommandItems,
getSlashCommandSuggestion,
} from '@/components/rte-block-editor';
import "@/components/rte-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 "@rtecn/block-editor";
import "@rtecn/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 @rtecn/editor docs or @rtecn/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.