Getting started

Write your first wireframe in under two minutes. Wiremark turns a small DSL snippet into a clean SVG layout — no design tool required.

No install required

The fastest way to try Wiremark is the browser editor. No account, no CLI, no npm package needed.

Open the editor — go to /editor and start typing. The preview updates on every keystroke.

Using the library in your own project

For server-side rendering, CI pipelines, or documentation builds, install the package from npm:

# npm
npm install @guildmark/wiremark

# pnpm
pnpm add @guildmark/wiremark

ESM and CommonJS both supported. The package ships dist/index.js (ESM) and dist/index.cjs (CommonJS) with bundled TypeScript declarations, and has no runtime dependencies.

PNG rendering in Node additionally needs the optional peer dependency @resvg/resvg-js — see Export below.

Write your first diagram

Every Wiremark document starts with the root keyword wiremarkUI (or the alias ui). Pages are declared with page, and components sit inside page blocks.

Try editing the snippet below — the preview updates live:

Live example Open in editor ↗

Export

In the browser editor, Export SVG and Export PNG buttons are available in the toolbar. SVG is lossless and recommended for Markdown, Notion, or Confluence. PNG is better for presentations.

From the library, the same outputs are two function calls:

import { exportSVG } from "@guildmark/wiremark";

// SVG — returns an SVG string
const svg = exportSVG(`
  wiremarkUI
    page "Login" {
      form {
        input "Email"
        input "Password"
        button "Sign in" primary
      }
    }
`);

For PNG, pick the function that matches your runtime:

// Browser — rasterises via <canvas>, resolves to a Blob
import { exportPNG } from "@guildmark/wiremark";
const blob = await exportPNG(source);

// Node.js — rasterises via resvg, resolves to a Buffer.
// Requires the optional peer dependency: npm install @resvg/resvg-js
import { exportPNGNode } from "@guildmark/wiremark";
const buffer = await exportPNGNode(source);

API quick reference

Export	Type	Description
`parse(source)`	sync	Tokenise and parse DSL source. Returns a raw AST with any errors attached.
`resolve(ast)`	sync	Resolve named declarations and refs. Returns a fully resolved `Document`.
`render(doc)`	sync	Render a resolved document to an SVG string.
`exportSVG(source)`	sync	Convenience wrapper: `parse → resolve → render`. Returns an SVG string.
`exportPNG(source)`	async	Browser only — rasterises via `<canvas>`. Returns a `Blob`.
`exportPNGNode(source)`	async	Node only — rasterises via resvg. Returns a `Buffer`. Needs `@resvg/resvg-js`.

Next steps

Read the full DSL syntax reference to learn every keyword and modifier.
Explore the template gallery — 10 ready-made wireframes you can open and edit.
Learn how to declare reusable components like shared headers and sidebars.
Wire multiple screens together with multi-page flows.