Wire-DSL Documentation

Build wireframes with code, not clicks

Get Started Learn the Language Preview Online

What is Wire-DSL?

Wire-DSL is a declarative, block-based domain-specific language (DSL) for creating interactive wireframes using code instead of visual tools.

Instead of dragging components in a design tool, you write clean, readable code:

project "Login App" {
  style {
    device: "tablet"
    density: "comfortable"
  }

  screen LoginScreen {
    layout card(padding: lg, gap: md, radius: md, border: true) {
      component Heading text: "Welcome"
      component Input label: "Email"
      component Input label: "Password"
      component Button text: "Sign In" variant: primary
    }
  }
}

Render it instantly to SVG, PNG, or PDF.

Why Wire-DSL?

Code-First Workflow – Version control, diff, and collaborate like code
28 Built-In Components – Buttons, forms, tables, navigation, more
5 Layout Types – Stack, Grid, Split, Panel, Card with intelligent spacing
Design Tokens – Consistent theming across wireframes
Instant Rendering – SVG, PNG, PDF exports
AI-Friendly – Generate wireframes from natural language
Accessible – Built-in accessibility best practices

Quick Start

Installation (30 seconds)

npm install -g @wire-dsl/cli
wire render myfile.wire output.svg

Your First Wireframe

project "Hello" {
  style { density: "normal" spacing: "md" }

  screen Home {
    layout stack(padding: lg) {
      component Heading text: "Hello World"
    }
  }
}

→ Complete Getting Started Guide

Core Sections

🚀 Getting Started

Installation and setup
Your first wireframe
Web editor preview
Common patterns

📚 Language Guide

Complete DSL syntax
All components
Layout containers
Style system
Icons & styling

🏗️ Architecture

System design (7-layer pipeline)
IR format specification
Layout engine algorithms
Validation rules

💡 Examples

20+ example files
Dashboard, forms, cards
Learning paths

🛠️ Tooling

CLI reference
Web editor
LLM prompting guide

🤝 Contributing

Development setup
Code quality standards
Contribution workflow
Project roadmap

30 Components

Category	Components
Text	Heading, Text, Label
Input	Input, Textarea, Select, Checkbox, Radio, Toggle
Buttons	Button, IconButton
Navigation	Topbar, SidebarMenu, Sidebar, Breadcrumbs, Tabs
Data	Table, List
Media	Image, Icon
Display	Divider, Separate, Badge, Link, Alert
Information	Stat, Card, Code, Chart
Modal & Overlay	Modal

5 Layout Containers

Stack – Linear vertical/horizontal arrangement
Grid – 12-column responsive grid
Split – Sidebar + main content layout
Panel – Bordered container with padding
Card – Self-contained grouped content

Popular Use Cases

📊 Dashboards

layout grid(columns: 12, gap: lg) {
  cell span: 4 { component Stat title: "Users" value: "1,234" }
  cell span: 8 { component Table columns: "ID,Name,Status" rows: 5 }
}

📋 Forms

layout card(padding: lg, gap: md, radius: md, border: true) {
  component Heading text: "Signup Form"
  component Input label: "Name" placeholder: "John Doe"
  component Select label: "Country" items: "USA,Canada,Mexico"
  component Checkbox label: "I agree to terms"
  component Button text: "Submit" variant: primary
}

🎨 Design Systems

style {
  density: "comfortable"
  spacing: "lg"
  radius: "lg"
  stroke: "thin"
  font: "base"
}

Rendering Options

Web Editor

Live preview while coding
Component reference
editor
No installation needed

CLI

wire render dashboard.wire output.svg
wire render dashboard.wire output.pdf
wire validate dashboard.wire

Programmatic

import { Parser, IRGenerator, SVGRenderer } from '@wire-dsl/engine';

const ir = new Parser(code).parse();
const svg = new SVGRenderer(ir).render();

File Format

Wire-DSL files use the .wire extension:

project-name.wire
screens/
  ├── login.wire
  ├── dashboard.wire
  └── settings.wire

Design Philosophy

Declarative – Describe what, not how
Human-Readable – Clear syntax, no complexity
Composable – Build complex UIs from simple blocks
Themeable – Consistent design across wireframes
Accessible – Built-in best practices
Fast – Instant rendering
Versionable – Works with Git, diff-friendly
AI-Powered – Generate from natural language with predictable, LLM-friendly syntax