Wrafjs - DSL Language extension

A VS Code extension that adds support for .wraf files: syntax highlighting, live SVG preview, and Markdown integration.

Wrafjs is a domain-specific language for describing UI wireframes as structured text, optimized to be generated by language models. It solves the problem of creating interface wireframes with maximum token efficiency and structural clarity, producing SVG visualizations from simple textual descriptions. (GitHub)

Features

• Syntax Highlighting - Full syntax highlighting for .wraf files
• Live Preview - Open a preview panel to see your design rendered as SVG in real-time
• Markdown Integration - Embed .wraf designs in Markdown files using:
  • !include[file.wraf] directive
  • ```wraf code fences

Usage

Preview Panel

1. Open a .wraf file in VS Code
2. Click the Wraf Preview button in the editor title bar, or run the Wraf: Open Wraf Preview command

Markdown Integration

Create a Markdown file with wraf components:

# My Design

!include[components/Login.wraf]

Or use code fences:

```wraf
Screen {
  width: 200
  heigth: 200
  Button { text: "Click Me" }
}

Run `Wraf: Open Markdown Preview (Wraf)` to see the rendered output or click the Wraf Preview button.

## License

MIT