Wireweave for VS Code

Syntax highlighting and live preview for Wireweave - a text-based wireframe DSL for AI-assisted design.

---

Features

• Syntax Highlighting - Full syntax highlighting for .wf and .wireframe files
• Live Preview - Real-time preview as you type
• Auto-completion - Smart suggestions for components, attributes, and values with snippets
• Hover Documentation - View component and attribute documentation on hover
• Diagnostics - Real-time error detection (unknown components, unmatched braces, etc.)
• Markdown Integration - Embed wireframes in Markdown with ```wireframe code blocks
• Export Options - Export wireframes as HTML
• Theme Support - Auto-detects VS Code theme (light/dark)

Installation

From VS Code Marketplace

1. Open Extensions sidebar (Cmd+Shift+X / Ctrl+Shift+X)
2. Search for "Wireweave"
3. Click Install

Or install via command line:

code --install-extension wireweave.wireweave-vscode

Quick Start

1. Create a wireframe file

Create a new file with .wf extension:

page "Login" {
  main p=8 {
    row justify=center {
      col span=4 {
        card p=6 {
          title "Sign In" level=2
          input "Email" inputType=email required
          input "Password" inputType=password required
          button "Sign In" primary
        }
      }
    }
  }
}

2. Open the preview

• Keyboard: Cmd+K V (Mac) / Ctrl+K V (Windows/Linux)
• Command Palette: Wireweave: Open Preview to Side
• Editor Title: Click the preview icon

3. Export (optional)

• Wireweave: Export as HTML

Markdown Preview

Embed wireframes in your Markdown documentation:

# Login Page Design

```wireframe
page {
  card p=4 {
    title "Login"
    input "Email" inputType=email
    button "Sign In" primary
  }
}
```

Open Markdown preview (Cmd+Shift+V) to see the rendered wireframe.

Commands

Command	Keybinding	Description
Wireweave: Open Preview	-	Open preview in current panel
Wireweave: Open Preview to Side	Cmd+K V	Open preview in split view
Wireweave: Export as HTML	-	Export to HTML file

Settings

Setting	Default	Description
wireframe.theme	auto	Preview theme (auto, light, dark)
wireframe.autoPreview	false	Auto-open preview when opening wireframe files
wireframe.previewWidth	1200	Base width for preview (in pixels)

Supported File Extensions

• .wf (recommended)
• .wireframe

Learn More

• Documentation
• Playground

Feedback & Issues

• GitHub Issues

License

MIT