Rtecn

Code ownership

What code you own after installing rtecn and how it affects customization.

Code ownership

Rtecn is designed so that you own the code after installation. How much you own depends on the install method.

When you install via the shadcn registry with npx shadcn@latest add @rtecn/editor, the CLI copies every source file directly into your project. The editor becomes part of your codebase — you can modify anything without fighting a dependency.

your-project/
├── components/
│   ├── rte-editor/
│   │   ├── index.ts
│   │   ├── rte-text-editor.tsx
│   │   ├── rte-context.ts
│   │   ├── rte-toolbar.tsx
│   │   ├── rte-content.tsx
│   │   ├── rte-controls-group.tsx
│   │   ├── labels.ts
│   │   ├── icons.tsx
│   │   ├── types.ts
│   │   ├── style.css
│   │   ├── controls/
│   │   │   ├── rte-control.tsx
│   │   │   ├── rte-controls.tsx
│   │   │   ├── rte-link-control.tsx
│   │   │   ├── rte-twitter-control.tsx
│   │   │   └── rte-youtube-control.tsx
│   │   ├── extensions/
│   │   │   ├── index.ts
│   │   │   ├── link.ts
│   │   │   └── resizable-node-view.tsx
│   │   └── ui/
│   │       ├── utils.ts
│   │       ├── button.tsx
│   │       ├── toggle.tsx
│   │       ├── popover.tsx
│   │       └── input.tsx
│   └── rte-block-editor/
│       └── ... (same pattern, ~19 files)

What this means for you:

  • Full customization: Every control, extension, UI component, and style is yours to edit. Want to change the toolbar layout? Edit rte-text-editor.tsx. Want different resize behavior? Edit resizable-node-view.tsx.
  • No dependency lock-in: Your editor doesn't break when rtecn publishes a new version. You control when and if you update.
  • Direct imports: Import from your project's components directory, not from a node_modules package:
import { RichTextEditor, Link } from "@/components/rte-editor";
import "@/components/rte-editor/style.css";

Peerdependencies are not copied — @tiptap/* packages remain in node_modules. You own the UI layer and extensions that are specific to rtecn.

npm install

When you install @rtecn/editor from npm, you get the compiled JavaScript and type definitions in node_modules. The source files remain in the published package and are not copied into your project.

your-project/
└── node_modules/
    └── @rtecn/editor/
        ├── dist/
        │   ├── index.js
        │   ├── index.cjs
        │   ├── index.d.ts
        │   └── style.css
        └── package.json

Tradeoffs:

AspectRegistry (recommended)npm
Files in your project~20 files, full source4 files, compiled dist
CustomizableEverythingLimited (props, CSS overrides)
UpdatesManual (re-run shadcn add)npm update
Bundle sizeTree-shaken with your buildSame
Version pinningTracks latest sourceSemver via npm

Updating

With the registry install, update by re-running the same shadcn add command:

npx shadcn@latest add @rtecn/editor

The CLI will prompt you before overwriting each file. If you've made local changes, keep your version or manually merge the diff.

License

Rtecn is MIT licensed. You can use it in personal and commercial projects, modify the source, and redistribute it under the same license.

On this page