DSL syntax

Complete syntax reference for the Wiremark DSL — the text format for describing UI wireframes.

Root block

Every Wiremark document must start with either wiremarkUI or the short alias ui. This is the root block keyword.

wiremarkUI
  page "My Screen" { }

ui
  page "My Screen" { }

Both are equivalent. wiremarkUI is preferred in documentation for clarity.

import

External stylesheets can be loaded into the SVG output using import before the root block:

import "https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"

wiremarkUI
  page "Home" { }

Only https:// and http:// URLs are accepted. Imports are injected as <link> elements inside the SVG <defs> block.

Pages

Pages are the top-level containers. Every page becomes one frame in the rendered SVG.

Anonymous page (no ID):

wiremarkUI
  page "Dashboard" {
    header "My App"
  }

Named page (with ID for flows and button links):

wiremarkUI
  page HOME "Home" { }
  page ABOUT "About" { }
  HOME --> ABOUT

The ID (HOME, ABOUT) is an uppercase identifier used in flow declarations and button ... link targets. The quoted string is the page title displayed in the frame header.

Components

Components follow this syntax rule:

kind "label" [modifiers] [{ children }]

• kind — a keyword (button, table, nav, metric, etc.)
• "label" — an optional quoted string
• modifiers — optional single-word keywords on the same line (primary, active, disabled, etc.)
• { children } — an optional block containing child components

A few components take a second string after the label:

metric "Total Users" "1,284"      // label, then the large value
field "Status" "Shipped"          // label, then the value
chart "Revenue" "bar"             // caption, then the variant
progress "72%" "Uploading…"       // percentage, then a caption
pagination "3" "12"               // current page, then total pages

Inline (no block):

button "Save" primary
input "Email" error
alert "Something went wrong" error

Block (with children):

form {
  input "Name"
  input "Email"
  button "Submit" primary
}

Named declarations

Components can be declared at the root level (outside any page) with an identifier, then referenced inside any page by that identifier. The resolver replaces the reference with a deep copy of the declaration.

wiremarkUI
  sidebar SD {
    nav "Dashboard" active, "Users", "Settings"
  }

  header H "My App"

  page "Screen A" {
    H
    SD
    text "Content A"
  }

  page "Screen B" {
    H
    SD
    text "Content B"
  }

Declarations must appear before their first use. Any component kind can be declared.

Flow declarations

Flow declarations define navigation order between named pages. They appear at the end of the document, outside any page block.

HOME --> USERS --> DETAIL

Directional arrows:

Mixed-direction chains are supported:

HOME -r-> USERS -d-> DETAIL

This places USERS to the right of HOME, and DETAIL below USERS.

Modifiers

Modifier words follow the component label on the same line. Multiple modifiers are separated by spaces.

Layout direction is contextual: nav is horizontal inside a header and vertical inside a sidebar. The word vertical is accepted for backwards compatibility but has no effect.

Full example

A complete two-page application with a shared sidebar, metric grid, data table, and a right-pointing flow: