Avodado Studio

Avodado Studio is the one local surface for Avodado docs: a full-screen visual editor, the built docs site, and a presentation view, behind a single Edit | Site | Present switch in the top bar. Run it from an Avodado project:

avo studio                   # opens the browser (--port, --no-open)

The CLI serves the built app together with a file-bridge API and opens the browser. In Edit mode all parsing, validation, and rendering happens in the browser via @avodado/core and @avodado/render; the server additionally mounts the built docs site under /site/… for Site mode.

Three modes, one top bar

• Edit — the visual editor described below. The default.
• Site — the exact site avo build produces (index, sidebar nav, cross-doc links, the Doc | Slides toggle), served live in place. Pages render from disk, so a dirty doc shows a slim "⌘S to update" notice; saves and outside edits repaint the preview.
• Present — the current canvas state (unsaved edits included) as a slide deck, exactly what avo slides renders. It's a snapshot of the moment you enter the mode; ⇧⌘P toggles it, Esc (or the on-screen pill) returns to Edit.

The editing model

Authoring is keyboard-first, directly on the rendered doc:

• Click selects — a block on the canvas, or a part inside a rendered block (a sequence message, a diagram node, a table cell).
• Enter (or double-click) edits the selection: a block opens the edit sheet — a schema-generated form with smart per-field controls, plus a raw YAML tab — while a diagram part opens an in-place micro-editor for exactly that YAML value.
• Arrow keys move the selected part — grid cells for diagram nodes, reorder for list items, cell navigation on table cells; ⌥+arrows nudge the hovered part, ⌫ deletes an item, Tab cycles parts, Esc pops back out.
• Drag moves parts on the diagram itself — block-graph nodes snap to grid cells, order-based lists reorder with a live insertion indicator.
• Insert via the + menu (a searchable gallery of every insertable block with live-rendered thumbnails) or the / slash command; ? shows the full shortcut list.
• Import by drop. Drag a file onto the canvas (Edit mode) and a drop veil appears: a .csv lands as a ready-filled block at that spot — the studio auto-picks table, statustable, or chart from the data and the toast says why (⌘Z undoes) — while an OpenAPI .yaml/.json offers to create a whole new doc (slug prefilled from the spec's title). Both menus also carry an Import from file… entry that opens a file picker into the same flow.

Files stay the source of truth

The studio reads and writes your .md files through the CLI's JSON file bridge (bound to 127.0.0.1, with SSE change events) — it never owns state. Edits go through the core library's surgical edit ops (replaceBlockBody, insertBlock, setYamlPath, …), so a studio session rewrites individual fenced blocks in place. Direct on-diagram interactions — click to select a part, Enter to edit it, arrow keys or drag to move it — compile down to the same ops.

That has a practical superpower: outside changes repaint live. Ask an AI agent to edit a doc while the studio has it open, and the change appears on the canvas as the file hits disk — and Site mode reloads its pages the same way. See Author with AI.

Where it sits

Architecturally, the studio is an outermost consumer of core + render — a browser SPA shipped as built static assets, served by avo studio alongside the file bridge. The layering rules are in Architecture.