@wire-dsl/cli

Command-line interface for Wire-DSL. Transform .wire DSL files into SVG, PNG, and PDF wireframes.

Installation

npm install -g @wire-dsl/cli

Or use with npx:

npx @wire-dsl/cli [command]

Usage

Basic Commands

# Render a .wire file to PDF/SVG
wire render input.wire --output output.pdf

# Validate .wire file syntax
wire validate input.wire

# Initialize a new WireDSL project
wire init my-project

# Show version
wire --version

# Help
wire --help

Command Examples

Render to PDF:

wire render dashboard.wire --output dashboard.pdf

Render to SVG (stdout):

wire render dashboard.wire

Validate syntax:

wire validate dashboard.wire

Initialize new project:

wire init
# or with a name:
wire init my-wireframes

What is Wire-DSL?

Wire-DSL is a block-declarative Domain-Specific Language for creating interactive wireframes using code instead of visual tools.

Write wireframes like this:

project "Dashboard" {
  theme {
    density: "normal"
    spacing: "md"
    radius: "md"
    stroke: "normal"
    font: "base"
  }
  screen Dashboard {
    layout grid(columns: 2, gap: md) {
      cell span: 1 {
        layout card(padding: lg, gap: md, radius: md, border: true) {
          component Stat title: "Q4 Revenue" value: "$2.5M"
        }
      }
      cell span: 1 {
        layout card(padding: lg, gap: md, radius: md, border: true) {
          component Stat title: "Active Users" value: "1.2K"
        }
      }
    }
  }
}

Features

• 🎯 Block-declarative syntax - Intuitive, structured definitions
• 📱 30+ UI components - Buttons, forms, cards, modals, and more
• 🎨 Theming support - Customize colors, typography, spacing
• 🔄 Responsive layouts - Grid, Stack, Split containers
• ⚡ Fast compilation - Powered by Chevrotain parser
• 🧪 Validation - Zod-based schema validation

Documentation

• Full Documentation
• DSL Syntax Guide
• Components Reference

License

MIT