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.

If you want to use the library directly in your project — for server-side rendering, CI pipelines, or embedding in a documentation build — continue below.

Install the library — (under implementation)

Install the wiremark package from npm:

# npm
npm install wiremark

# pnpm
pnpm add wiremark

ESM and CJS both supported. The package ships dist/index.js (ESM) and dist/index.cjs (CommonJS) with bundled TypeScript declarations. No peer dependencies.

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

The library exposes two export functions. Both are synchronous and work in Node.js, browsers, and edge runtimes.

import { exportSVG, exportPNG } from "wiremark";

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

// PNG — returns a Buffer (Node.js) or Uint8Array (browser)
const png = await exportPNG(source);

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.

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	Same pipeline, then rasterises via resvg. Returns a `Buffer` / `Uint8Array`.

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.