Examples

Explore complete, working Wire-DSL examples. All examples are available in the examples/ folder of the repository.

Available Examples

Quick Start

Login Form - Simple login wireframe
Simple Dashboard - Basic dashboard layout

Dashboards

Admin Dashboard - Full admin interface with sidebar and grid
Analytics Dashboard - Analytics with charts and metrics
CRM Dashboard - Customer relationship management interface
Simple Multi-Screen - Multiple screens in one project

Forms

Form Example - Basic form with inputs and buttons
Form 2-Column - Two-column form layout

Components

Card & StatCard Demo - Card container examples
Component Composition Demo - Custom component usage
Components Catalog - All 23 components displayed
Icon Demo - Icon and IconButton examples
Icons Demo - Extended icon examples

Layouts

Stack Alignment Demo - Stack layout alignment options
Panel Example - Panel container examples
Panel Colors Example - Panel styling variations

Themes

Theme Test - Theme token variations
Topbar Test - Topbar component styling
Token Background Demo - Theme token effects
Screen Background Demo - Background styling

Advanced

Admin Dashboard Improved - Enhanced admin dashboard
Admin Dashboard with Icons - Dashboard with icon buttons

How to Use Examples

1. In the Web Editor

Open the web editor: cd apps/web && pnpm dev
Copy the example code from the file
Paste it into the editor
See live preview on the right

2. With the CLI

Render an example to SVG:

cd packages/cli
pnpm build
node dist/index.js render ../../examples/admin-dashboard.wire -o dashboard.svg

3. As a Starting Point

Copy an example file
Modify it for your needs
Use it as a template

Common Patterns

Dashboard Layout

layout split(sidebar: 260, gap: md) {
  layout stack(gap: lg, padding: lg) {
    component Topbar title: "Dashboard"
    component SidebarMenu items: "..."
  }

  layout stack(gap: md, padding: lg) {
    layout grid(columns: 12, gap: md) {
      cell span: 3 { component StatCard ... }
      cell span: 3 { component StatCard ... }
    }

    component Table columns: "..." rows: 10
  }
}

Form Layout

layout stack(direction: vertical, gap: md, padding: lg) {
  component Heading text: "Form Title"

  component Input label: "Field 1"
  component Input label: "Field 2"
  component Textarea label: "Comments" rows: 4

  layout stack(direction: horizontal, gap: md, align: "right") {
    component Button text: "Cancel" variant: secondary
    component Button text: "Submit" variant: primary
  }
}

Card Grid

layout grid(columns: 12, gap: lg, padding: lg) {
  cell span: 4 {
    layout card(padding: lg, gap: md, radius: md) {
      component Image placeholder: "square" height: 200
      component Heading text: "Item"
      component Text content: "Description"
      component Button text: "Action" variant: primary
    }
  }
  // ... repeat for 3 columns
}

Learning Path

New to Wire-DSL? Follow this learning path:

Start: Installation
First Wireframe: Create Your First Wireframe
Explore: Web Editor Guide
Learn Syntax: DSL Syntax Reference
Learn Components: All 23 Components
Master Layouts: Containers & Layouts
Study Examples: The examples in this section
Build Your Own: Create your own wireframes

Contributing Examples

Have a cool example? Contribute it to the project:

Create a .wire file with your example
Add it to the examples/ folder
Submit a pull request

See Contributing for more details.

Example Structure

All examples follow this structure:

project "Example Name" {
  theme {
    density: "normal"
    spacing: "md"
    radius: "md"
    stroke: "normal"
    font: "base"
  }

  screen ScreenName {
    layout ... {
      // Content here
    }
  }
}

This ensures:

✅ Valid Wire-DSL syntax
✅ Complete theme configuration
✅ Clear, readable code
✅ Useful patterns and practices

Tips for Using Examples

Copy & Customize: Take an example and modify it
Mix & Match: Combine patterns from different examples
Theme Variations: Try different theme values
Test Layouts: Experiment with different layout types
Learn Components: See how components are used in context