Wireframe - UI Mockup DSL for VS Code

Create beautiful UI wireframes and mockups using a simple, text-based domain-specific language (DSL). Perfect for rapid prototyping, documentation, and communicating UI designs.

✨ Features

🚀 Quick Start

1. Create a new file

Create a new file with the .wire extension:

example.wire

2. Write your wireframe

wireframe clean
    %title: My First Wireframe
    
    Card w=300
        Vertical gap=16 padding=24
            Label "**Welcome**"
            TextInput "Enter your name" :txtName required
            Button "Get Started" primary
        /Vertical
    /Card
/wireframe

3. Preview your wireframe

Press Ctrl+Shift+V (or Cmd+Shift+V on Mac) to open the live preview.

🎨 Themes

Choose from 4 built-in themes:

wireframe sketch    // Hand-drawn style
wireframe clean     // Minimal modern style
wireframe blueprint // Technical blueprint
wireframe realistic // Production-like

⌨️ Keyboard Shortcuts

On Mac, use Cmd instead of Ctrl

🧩 Components

Basic Controls

Button "Click Me" primary
Button "Cancel" secondary
TextInput "Email" :txtEmail required
PasswordInput "Password" :txtPass
TextArea "Description" rows=4
Checkbox "Accept terms" checked
Radio "Option A" selected
Switch "Enable notifications"
Dropdown "Select..."
    Option "Option 1"
    Option "Option 2"
/Dropdown

Layout Components

// Vertical stack
Vertical gap=16
    Button "First"
    Button "Second"
/Vertical

// Horizontal row
Horizontal gap=8
    Button "Left"
    Button "Right"
/Horizontal

// Grid with positioning
Grid cols=3 rows=2 gap=8
    Button "Span 2" grid=0,0,1,2
    Button "Normal" grid=0,2
/Grid

// Canvas with absolute positioning
Canvas w=400 h=300
    Button "At 50,100" canvas=50,100
/Canvas

Section Components

Card
    // Content with rounded corners and shadow
/Card

Header dock=top h=60
    // Top header content
/Header

Sidebar dock=left w=200
    // Side navigation
/Sidebar

Modal
    Dialog "Confirm"
        // Dialog content
    /Dialog
/Modal

Data Components

// Table with markdown syntax
Table
    | Name | Email | Role |
    |------|-------|------|
    | John | john@example.com | Admin |
/Table

// DataGrid with typed columns
DataGrid rows=5 selected
    ColumnText "Name"
    ColumnDate "Created"
    ColumnNumber "Count"
    ColumnCheckbox "Active"
    ColumnButton "Actions"
/DataGrid

// Custom table with Row/Cell
Row selected
    Cell "Header 1" align=left
    Cell "Header 2" align=center
/Row

Visual Components

Avatar "JD" size=lg circle    // xs, sm, md, lg, xl
Badge "New" variant=success   // info, success, warning, error
Progress value=75
Icon $settings
Image "photo.jpg" w=200 h=150

Navigation Components

Tabs
    Tab "General" active
        // Tab content
    /Tab
    Tab "Settings"
        // Tab content
    /Tab
/Tabs

Menu
    MenuItem "Home" $home
    MenuItem "Settings" $settings
/Menu

Breadcrumb
    BreadcrumbItem "Home" @home
    BreadcrumbItem "Products"
/Breadcrumb

🔧 Configuration

Access settings via File > Preferences > Settings and search for "Wireframe".

📋 Commands

Access via Command Palette (Ctrl+Shift+P):

📝 Syntax Reference

Document Structure

wireframe <theme>           // Required: start document
    %title: Document Title  // Optional: metadata
    %author: Your Name
    %version: 1.0
    
    // Your components here
    
/wireframe                  // Required: end document

Identifiers & References

Common Modifiers

Common Attributes

🎯 Code Snippets

Type these prefixes and press Tab to insert snippets:

📁 File Types

🔗 Related

• Wireframe Core - Parser and renderer library
• Wireframe CLI - Command-line tool
• GitHub Repository - Source code and issues

📄 License

MIT © jonkeda

🐛 Issues & Feedback

Found a bug or have a feature request?

Open an issue on GitHub