# chiltepin-studio

> Chiltepin Studio — the local, AI-native visual editor for documentation-as-code. Edit Markdown + typed YAML blocks for API docs, architecture & system design, ADRs, and frontend design systems with live preview, browse the built docs site, and present as

Latest version **0.16.2** (published 2026-09-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install chiltepin-studio
pnpm add chiltepin-studio
yarn add chiltepin-studio
bun add chiltepin-studio
```

## Health

**Score 55/100 (C)** — status: active.

Positive: no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no types; no esm support; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.16.2 |
| Published | 2026-09-14 |
| First published | 2026-09-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | jdiejim |
| Keywords | chiltepin, studio, documentation, docs-as-code, documentation-as-code, visual-editor, editor, wysiwyg, markdown, yaml, typed-blocks, live-preview, slides, presentations, diagrams, api-documentation, system-design, architecture, adr, design-system, ai-documentation, technical-writing, developer-tools |

## Links

- npm: https://www.npmjs.com/package/chiltepin-studio
- Repository: https://github.com/jdiejim/chiltepin
- Homepage: https://chiltepin.dev
- Issues: https://github.com/jdiejim/chiltepin/issues
- npm.io page: https://npm.io/package/chiltepin-studio

## Alternatives

- [monaco-yaml](https://npm.io/package/monaco-yaml.md) — 420.1K weekly downloads
- [@crewx/workflow](https://npm.io/package/@crewx/workflow.md) — 3.1K weekly downloads
- [yaml-cat](https://npm.io/package/yaml-cat.md) — 38 weekly downloads
- [nunjucks-in-yaml](https://npm.io/package/nunjucks-in-yaml.md) — 9 weekly downloads
- [shopify-symlinks](https://npm.io/package/shopify-symlinks.md) — 3 weekly downloads

## Recent versions

- 0.16.2 (latest) — 2026-09-14
- 0.16.1 — 2026-09-14
- 0.16.0 — 2026-09-14

## README

# 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:

```sh
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 <kbd>D</kbd> 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

```sh
# 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/`.

---
_Source: https://npm.io/package/chiltepin-studio · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._