Rtecn

Rich text editor components for shadcn/ui projects, built on Tiptap.

Two editor variants are available, installable via the shadcn registry (recommended) or npm/pnpm:

Package	Description
@rtecn/editor	Toolbar-style rich text editor with 20+ built-in controls
@rtecn/block-editor	Notion-style block editor with slash commands, drag handles, and bubble menu

Quick start

Install via the shadcn registry (recommended) — this copies the editor source directly into your project so you can customize it freely.

Add the rtecn registry to your components.json:

{
  "$schema": "https://ui.shadcn.com/schema/registry.json",
  "registries": {
    "@rtecn": "https://rtecn.space/r/{name}.json"
  }
}

Then install whichever editor you want (pick one):

npx shadcn@latest add @rtecn/editor

npx shadcn@latest add @rtecn/block-editor

Then install the Tiptap peer dependencies and import the components. See the registry docs for full usage instructions.

npm

Both packages are also available on npm, if you'd rather depend on a published, versioned package than vendor the source into your project. Pick one:

npm install @rtecn/editor @tiptap/react @tiptap/pm @tiptap/starter-kit @tiptap/extension-link

npm install @rtecn/block-editor @tiptap/react @tiptap/pm @tiptap/starter-kit @tiptap/suggestion @tiptap/extension-drag-handle-react

Or with pnpm:

pnpm add @rtecn/editor @tiptap/react @tiptap/pm @tiptap/starter-kit @tiptap/extension-link

pnpm add @rtecn/block-editor @tiptap/react @tiptap/pm @tiptap/starter-kit @tiptap/suggestion @tiptap/extension-drag-handle-react

See npm vs registry for the full tradeoffs.

Documentation

Full documentation is available at rtecn.space:

• Getting started
• Editor API
• Block Editor API
• Customization
• Registry

Project structure

shadcn-RTE/
├── apps/
│   └── web/               # Documentation site (Next.js) + registry JSON
├── packages/
│   ├── editor/            # @rtecn/editor — toolbar-style editor
│   ├── block-editor/      # @rtecn/block-editor — block-type editor
│   └── ui/                # Shared shadcn/ui primitives (button, popover, etc.)
└── scripts/
    └── build-registry.mjs # Builds registry JSON from source files

Development

pnpm install
pnpm run dev              # Start all apps in development mode
pnpm run dev:web          # Start only the documentation site
pnpm run build:registry   # Rebuild registry JSON files

Built with

• Tiptap — Headless rich text editor framework
• shadcn/ui — Component primitives and design tokens
• Next.js — React framework
• Turborepo — Monorepo tooling
• TypeScript — Type safety