Skip to main content

Introduction to Wrafjs

Beta

wrafjs v1.0 is currently in beta. The language spec, control set, and toolchain are stable for experimentation but subject to breaking changes before the final release.

Wrafjs is a Domain-Specific Language (DSL) designed to describe UI wireframes as structured text. While technical in nature, its heart lies in reconnecting designers and developers with the creative process. It is purpose-built to be processed by Large Language Models (LLMs) and rendered instantly as a digital sketch.

The Creative Philosophy: Thinking by Sketching​

In a precision-first industry, we often fall into the trap of "premature polish"—spending hours on pixels before validating the core idea. Wrafjs embraces the power of Hand-Drawn Thinking:

  • Focus on Strategy, Not Pixels: By staying in low-fidelity longer, you ensure the UX and functional flow are solid before worrying about aesthetics.
  • The Speed of Thought: Sketching is the fastest way to explore multiple ideas. Wrafjs brings this speed to the AI era, allowing you to iterate through dozens of layouts in seconds.
  • Collaborative Freedom: Sketches are inherently inviting. They signal that an idea is "in progress," encouraging feedback and preventing the psychological barrier of "finishing" a design too early.
  • Non-Linear Creativity: Wrafjs allows you to describe interfaces as you think of them, removing the friction of complex design tools.

Why Wrafjs?​

Wrafjs bridges the gap between the traditional sketchpad and modern AI workflows:

  1. AI-Native: Optimized for token efficiency (estimated 80% token savings) and predictable structure, making it the perfect language for LLMs to brainstorm with you.
  2. Instant Visualization: See your "thought on paper" rendered immediately using a hand-drawn aesthetic (Rough.js).
  3. Iterative Agility: Change a single line of text to pivot your entire layout, maintaining creative momentum without technical overhead.
  4. Versionable Design: Since it's pure code, your UI is now part of your Git workflow.

The Power of Design as Code​

By treating wireframes as versionable text, Wrafjs introduces software engineering best practices to the creative process:

  • Historical Comparison: Use git diff to see exactly how a UI evolved over time, line by line. No more opaque binary blobs.
  • Single Source of Truth: The code is the documentation. It’s always up to date and easy to audit.
  • Collaborative Freedom: Branching and merging designs is now as easy as merging code.
  • Accessibility: Non-technical users can describe changes in natural language, and an LLM can apply them directly to the .wraf file.

Core Pillars​

  • Token Efficiency: No unnecessary decorative syntax or boilerplate.
  • Single-File Architecture: A complete screen is defined in a single .wraf file.
  • Determinism: There is only one clear way to express each UI concept.
  • Sketch Rendering: Uses a "hand-drawn" aesthetic (Rough.js) to emphasize prototyping.

Quick Start: Hello World​

Screen HelloWorld {
  width: 1440
  height: 900

  Card {
    position: center
    width: 300
    Text { text: "Hello Wrafjs!" variant: title align: center }
    Button { text: "Get Started" variant: primary }
  }
}