WireScript

Lisp-like syntax for wireframes. Embeds in Markdown. Perfect for AI.

(wire
  (screen login "Login" :mobile
    (box :center :gap 24 :padding 48
      (text "Welcome back" :high)
      (input "Email" :type email)
      (input "Password" :type password)
      (button "Sign In" :primary :full)
      (text "Forgot password?" :low))))

WireScript is a text-based DSL for describing UI wireframes. It's designed to be easy for humans to read and write, and trivial for AI to generate. Embed it in your markdown files and preview instantly.

Features

Simple syntax — S-expressions with intuitive flags and properties
35 UI elements — Containers, inputs, data displays, navigation, overlays
Multi-screen flows — Navigate between screens and open modals
Reusable components — Define once, use everywhere with parameters
Shared layouts — Common page structures with navigation highlighting
Markdown native — Embed in any .md file with fenced code blocks
AI-friendly — LLMs generate valid WireScript reliably

Preview Tools

Chrome Extension

Render WireScript wireframes directly on GitHub. View READMEs, issues, and PRs with interactive previews.

Install from Chrome Web Store

Obsidian Plugin

Render wireframes inline in your Obsidian notes. Switch between screens and navigate overlays without leaving your editor.

Coming soon to community plugins. Build from source today.

Playground

Try WireScript in the browser without installing anything.

Open Playground

CLI

Validate, render, and build wireframes from the command line.

# Validate a .wire file
wirescript verify app.wire

# Render to HTML
wirescript render app.wire > output.html

# Export to PNG (requires Playwright)
wirescript render app.wire -f png -o screenshot.png

# Build a static documentation site
wirescript build app.wire -o ./dist

# Format a .wire file
wirescript format app.wire

Install globally with pnpm add -g @wirescript/cli or use via npx @wirescript/cli.

Quick Start

Embed WireScript in any markdown file:

```wire
(box :gap 16 :padding 24
  (text "Hello World" :high)
  (button "Get Started" :primary))
```

Install the Chrome Extension to preview on GitHub, or use the Playground to experiment.

Syntax Overview

(wire
  ; Define reusable components
  (define user-card (name role)
    (card :row :gap 12 :padding 16
      (avatar $name)
      (box
        (text $name)
        (text $role :low))))

  ; Define shared layouts
  (layout app-layout
    (box :row :full
      (nav :width "200px" :padding 16
        (button "Home" :ghost :to home)
        (button "Settings" :ghost :to settings))
      (slot)))

  ; Define screens
  (screen home "Home" :desktop :layout app-layout
    (box :padding 24 :gap 16
      (text "Welcome" :high)
      (user-card :name "Alice" :role "Designer"))))

Elements

| Category | Elements | |----------|----------| | Containers | box card section header footer nav form list scroll group | | Content | text icon image avatar badge divider | | Interactive | button dropdown | | Inputs | input datepicker | | Data | metric chart progress skeleton | | Navigation | tabs tab breadcrumb crumb | | Overlays | modal drawer popover | | Utility | tooltip toast empty slot |

Flags

Boolean modifiers that change appearance or behavior:

(button "Submit" :primary :disabled)

| Type | Flags | |------|-------| | Layout | :row :col :grid :wrap | | Alignment | :start :center :end :between | | Emphasis | :high :medium :low | | Variant | :primary :ghost :danger :success | | Size | :full :fit :fill | | State | :disabled :checked :active |

Properties

Key-value pairs for configuration:

(box :gap 16 :padding 24 :width "300px")

| Property | Example | |----------|---------| | :gap | :gap 16 | | :padding | :padding 24 | | :width | :width "250px" | | :to | :to dashboard or :to #modal | | :type | :type email |

Navigation

Link buttons to screens or overlays using :to:

; Navigate to a screen
(button "Dashboard" :to dashboard)

; Open an overlay (# prefix targets modal/drawer/popover by ID)
(button "Settings" :to #settings-modal)

; Close current overlay
(button "Cancel" :to :close)

Examples

The examples/ folder contains complete wireframes:

login-form.wire — Authentication screens
dashboard.wire — Admin dashboard with metrics
e-commerce.wire — Product catalog and cart
messaging-app.wire — Chat interface
task-manager.wire — Kanban board
crm-system.wire — Customer management
analytics-dashboard.wire — Data visualization
settings-page.wire — Settings forms
social-app.wire — Social media feed
landing-page.wire — Marketing page

Documentation

Full documentation available at wirescript.dev

Getting Started — Tutorial and basics
Components — All elements and properties
CLI — Command-line tools
Chrome Extension — GitHub integration
Obsidian Plugin — Note-taking integration

Project Structure

wirescript/
├── apps/
│   ├── chrome-extension/   # Chrome extension for GitHub
│   ├── obsidian-plugin/    # Obsidian plugin
│   ├── playground/         # Web playground
│   ├── docs/               # Documentation site
│   ├── cli/                # Command-line tools
│   └── viewer/             # Electron viewer
├── packages/
│   ├── dsl/                # Parser and compiler
│   ├── renderer/           # React rendering engine
│   └── editor/             # CodeMirror editor
└── examples/               # Example .wire files

Development

Prerequisites: Node.js 20+, pnpm 9+

# Install dependencies
pnpm install

# Start the docs site
pnpm --filter docs dev

# Build Chrome extension
pnpm --filter @wirescript/chrome-extension build

# Build Obsidian plugin
pnpm --filter @wirescript/obsidian-plugin build

License

Apache 2.0

Wirescript

Install / Use

README