chiltepin-studio

chiltepin-studio

Chiltepin Studio — a full-screen local visual editor for Chiltepin docs (Markdown + typed YAML blocks). The files on disk stay the single source of truth: the studio reads and writes them through the CLI's JSON file bridge, and all parsing, validation, and rendering happens in the browser via chiltepin-core and chiltepin-render.

Usage

Run it from a Chiltepin project:

chiltepin studio

The CLI serves the built app (from this package's dist/app/) together with the file-bridge API (/api/* + /__events SSE) and opens the browser.

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.
• Draw a node — press D on a selected diagram block (or the pen in its toolbar) and sketch: a rectangle becomes a process or a service, a diamond a decision or a gateway, a cylinder a database, a pill or an ellipse a start/end. A line between two nodes becomes an edge in the direction you drew it; from a node into empty space it adds a node there and connects it. An unclear stroke asks instead of guessing. Esc leaves pen mode.
• Insert via the + menu (a searchable gallery of every insertable block with live-rendered thumbnails) or the / slash command; ? shows the full shortcut list.

Edits are written back as surgical rewrites of individual fenced blocks, and outside changes to the same files (e.g. by an AI agent) repaint live over SSE.

Development

# terminal 1 — the file-bridge API on 127.0.0.1:4174 (chiltepin studio --no-open, or a mock)
# terminal 2 — the app with hot reload; /api and /__events proxy to :4174
pnpm --filter chiltepin-studio dev

pnpm --filter chiltepin-studio build produces:

• dist/app/ — the static app (Vite build), and
• dist/index.js + dist/index.d.ts — a tiny Node entry exporting assetsPath() so the CLI can locate dist/app/.