📦 Mockup DSL Documentation

This domain-specific language (DSL) enables rapid prototyping of wireframes using a simple, declarative syntax. It is designed for readability and speed, allowing developers and designers to define layout hierarchies with minimal boilerplate.

🔧 Structure Overview

Each line in the DSL represents an element and contains up to three components:

Subject — the element type (e.g., Box, button, picture, text)
Width — an optional relative width of the element (e.g., 0.5, 1)
Style — optional layout styles applied to the element (e.g., flex-h, grid-col-2)

Indented (tabbed) lines are nested children of the previous Box. Nesting determines the layout structure.

<{subject} {width} {style}>     // outler layer
    <{subject} {width} {style}> // nested layer

🧱 Supported Subjects

Box — a container that can hold nested elements
button — a clickable UI element
picture — an image container
text — a text label or block

📐 Width

Widths are expressed as decimals relative to the parent. For example:

<Box 0.5>

This creates a box that takes up 50% of its parent’s width.

🎨 Styles

There are two layout modes:

Flex

flex-h — horizontal flex layout
flex-v — vertical flex layout (default if no style is specified)

When using flex, you can specify alignment styles such as:

center
between
around
Any other valid flex alignment keyword

Grid

grid-col-<n> — divides the container into n columns

Example:

<Box 1 flex-h center>
<Box 0.5 grid-col-3>
<Button 0.25>
<Text 0.75 flex-v between>

📩 Nesting

To place elements inside a Box, indent them with a tab. The layout style defined by the parent Box applies to all children.

Example:

<Box flex-h center>
    <Button 0.3>
    <Text 0.7>

This creates a horizontally aligned Box with two elements inside: a button and a text block, taking up 30% and 70% width respectively.

If no style is specified, nested content defaults to flex-v.

Syntax