wiremark documentation

wiremark is a text-based, markdown-embeddable wireframing format — think "YAML-flavored MUI": a hierarchy of familiar Material UI component names, indented to show containment, rendered in a hand-drawn (Balsamiq-like) style.

A wireframe lives inside a fenced ```wireframe block:

```wireframe
Wireframe #login mobile
  Stack col gap=2
    Typography h4 "Sign in"
    TextField "Email" type=email
    TextField "Password" type=password
    Button "Sign in" primary to=#dashboard
```

These docs describe wiremark the language — the syntax you write inside that block. They are deliberately adapter-agnostic: nothing here depends on a particular host (Obsidian, markdown-it, remark, the editor, ...). Each adapter finds the fenced block and hands its contents to the same core, so what you learn here applies everywhere wiremark renders.

Guides

Read in order if you are new; jump around once you know the basics.

1. Introduction — what wiremark is, the mental model, and when to reach for it.
2. Getting started — your first wireframe, line by line.
3. Syntax & structure — indentation, components, properties, quoting, comments.
4. Layout & sizing — Stack, Box, Grid, and the sizing tokens.
5. Text & filler — real text, placeholder filler, amounts, and styles.
6. Frames, anchors & flow — naming screens, linking them, and composing shared chrome.
7. Patterns & recipes — worked examples for the layouts you'll build most.
8. Style & best practices — conventions, agent-first tips, and common mistakes.

Tools

• Rendering to SVG with the CLI — turn a .wiremark file into a standalone SVG with npx @wiremark/cli, no host required.

Reference

• Component library reference — every supported component and property, with its keyless behavior, default, and DSL mapping.

The reference is generated from meta/element-specs.json, which is the single source of truth for component coverage. Do not edit the generated markdown by hand. After changing the JSON, regenerate it:

npm run docs:reference

About these docs

Everything here is plain GitHub-flavored Markdown with no host-specific extensions, so it renders correctly on GitHub, in an IDE preview, or dropped into a static-site generator such as Docusaurus, VitePress, or MkDocs. Files are numbered for ordering; links between them are relative.

wiremark is specified at v0.1. The guides teach the stable v0.1 core; the reference lists every component and property wiremark supports.