Doc Editor

A block document editor, UI only, composed from the doc-* components: text, headings, quotes, lists, to-dos, callouts, code, Mermaid diagrams, tables, images, bookmarks, LaTeX and dividers over a plain list of blocks, with a slash menu, @ and [[ mentions of people, groups, documents and collections, file attachments, a Present button that turns the document into a slideshow (the editor's own sample is five documents to choose from, each written to present), markdown shortcuts (# - 1. [] > --- ``` ![alt](url)), dropped and pasted images and tables, a presence bar with outlined peer blocks, and typed-in streaming text. The host owns the data, the image storage and who is present.

Doc Editor

@velaui/doc-editor

@velaui/doc-editorOpen Open

pnpm dlx velaui add @velaui/doc-editor

npx shadcn@latest add @velaui/doc-editor

yarn dlx shadcn@latest add @velaui/doc-editor

bunx --bun shadcn@latest add @velaui/doc-editor

Built from

Doc BookmarkA link shown as a card with its host and URL, and an input while empty or being edited.
Doc CalloutA tinted note box in four tones - info, warning, danger, success - whose icon cycles the tone.
Doc CodeA code block with a searchable picker of 32 languages, line numbers you can turn off, line wrap, copy and a monospace editor. In the editor, ``` plus a space (or ```typescript) makes one, /code adds one, and code pasted from VS Code keeps its language.
Doc DiagramA Mermaid diagram with source and live preview, drawn in the veni-os whiteboard palette (light and dark). A picker inserts a starter for each of 31 types - flowchart, swimlane, sequence, class, state, ER, Gantt, git graph, pie, mindmap, kanban, timeline, journey, quadrant, XY, requirement, Sankey, architecture, C4, block, packet, radar, treemap and more - and invalid source shows an inline error. In the editor, /diagram, /mermaid, ```mermaid plus a space, or pasting Mermaid source makes one.
Doc FileA file attachment showing its name, type and size with a download link and an icon and colour for its kind (PDF, document, spreadsheet, presentation, archive, image, audio, video, code), as in the mail attachments; empty, it takes a chosen or dropped file of any kind.
Doc ImageAn image with an editable caption, shown at its true size: a retina image (a @2x name or a 144 dpi PNG or JPEG) is drawn at half its pixel width. Empty, it takes a file, a drop, a paste or a URL, in PNG, JPEG, GIF, WebP, AVIF, SVG, BMP or ICO. Selected, it offers Replace, left / center / right / full layout, pixel width and height, and edge-drag resize that keeps the aspect ratio; images under 32x32 px are inline icons. The host can supply its own picker and storage.
Doc ListOne bulleted, numbered or to-do list item built on the doc text line.
Doc MathDisplay math as LaTeX source in a monospace box.
Doc Mention MenuThe picker that @ and [[ open in the document editor: people, groups, documents and collections as you type, then Create a new doc.
Doc PresenceCollaboration marks for a shared document: overlapping collaborator avatars, a peer's inline text caret with a name flag, and a block outlined in the peer's colour.
Doc PresentA fullscreen slideshow over the page, scaled to fit, with Space, arrow, Page Up/Down, Home, End, f and Escape keys.
Doc Slash MenuThe grouped, filterable block picker that a slash opens in the document editor.
Doc TableAn editable grid with a header row. Row and column menus add, insert, move and delete; rows and columns drag to reorder, columns resize, and the table can span the window. Paste from a spreadsheet or web page, export CSV, Cmd+Enter adds a row and Cmd+Backspace deletes one.
Doc TypewriterText that types itself in with a caret, keeps typing when the text grows, and shows at once for reduced motion - how an assistant's writing arrives.
Doc TypographyThe borderless, auto-growing text line for paragraphs, three heading levels and quotes, plus the divider.
SelectDisplays a list of options for the user to pick from, triggered by a button.
1 iconFrom the Vela UI icon set, installed with the block.

Mount it in a route

// app/page.tsx
import DocEditor from "@/components/blocks/doc-editor/doc-editor";

export default function Page() {
  return <DocEditor />;
}