wiremark documentation

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

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

```wireframe
Wireframe mobile
  Stack column gap=2
    Typography h4 "Sign in"
    TextField "Email"
    TextField "Password"
    Button "Sign in" contained 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.
9. Icons — the built-in Material icon vocabulary, custom icons, and Iconify packs.

Tools

• Rendering to SVG with the CLI — turn a .wiremark file into a standalone SVG with npx @wiremark/cli, no host required.
• Giving wiremark to AI agents — ready-made instruction files (full and compact) to reference from an agent's CLAUDE.md/AGENTS.md, plus a downloadable Claude skill.

Reference

• Component library reference — every supported component and property, with its keyless behavior, default, and DSL mapping.
• Built-in icon gallery — every built-in icon, rendered, by category.

The reference pages are generated — components from meta/element-specs.json, icons from meta/builtin-icons.json; each JSON is the single source of truth for its page. Do not edit the generated markdown by hand. After changing a JSON, regenerate:

npm run docs:reference   # components.md from element-specs.json
npm run icons:builtin    # icons.md + the committed icon data, from builtin-icons.json

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.