Templates

Templates are complete editors built from @editorcn/editor. Each one installs as a shadcn block: the CLI adds the template, the editor, and every component and extension it depends on. You own the code after install, so you can change anything. Each template lands in its own folder, components/templates/<name>/, split into small files (types, constants, toolbar, panels and so on) with index.tsx as the entry point.

Templates work with shadcn/ui built on either Radix UI or Base UI.

All templates store content as Tiptap JSON (editor.getJSON()) and display it with the Static Renderer, which renders React elements instead of HTML. Content renders on the server, and stored content can't inject scripts. Use generateHTML(json, extensions) from @tiptap/core when you need HTML, for example in emails.

Comment Box

A comment thread with avatars, relative times, emoji reactions, YouTube-style replies and a composer built on the editor. Replies are one level deep and collapse under each comment; replying to a reply adds to the same thread and starts with an @mention. People can copy any comment and delete their own.

Installation

bunnpmpnpmyarn
$ pnpm dlx shadcn@latest add "https://editorcn.vercel.app/r/comment-box.json"
Copy

Usage

Each callback fires after the change shows on screen, so you can save it to your backend. onPost receives the parent comment's id when the new comment is a reply.

Copyimport { CommentBox } from "@/components/templates/comment-box";
 
export const Comments = ({ comments, user }) => (
  <CommentBox
    currentUser={{ avatar: user.image, id: user.id, name: user.name }}
    initialComments={comments}
    onPost={(content, parentId) => saveComment({ content, parentId })}
    onReact={(id, emoji) => toggleReaction(id, emoji)}
    onDelete={(id) => deleteComment(id)}
  />
);

Props

Simple Document Editor

A document page: a breadcrumb header with collaborators, a floating toolbar, and a paper-style page with a large editable title. The toolbar covers text styles, fonts, text and highlight colors, superscript and subscript, lists with indent and outdent, alignment, and an Insert menu for images, tables, quotes, code blocks and dividers. A status bar shows word count, reading time and keyboard shortcuts.

Installation

bunnpmpnpmyarn
$ pnpm dlx shadcn@latest add "https://editorcn.vercel.app/r/simple-document-editor.json"
Copy

The CLI also installs the Image Placeholder and Table extensions.

Usage

Copyimport { SimpleDocumentEditor } from "@/components/templates/simple-document-editor";
 
export const Doc = ({ doc }) => (
  <SimpleDocumentEditor
    initialTitle={doc.title}
    initialContent={doc.content}
    onChange={(content) => saveDocument(doc.id, content)}
    onTitleChange={(title) => renameDocument(doc.id, title)}
    onShare={() => openShareDialog(doc.id)}
  />
);

Props