Limitations

• Verify against current Makepad 2.0 docs; upstream APIs change frequently.
• Do not run bundled scripts without explicit user approval.

When to Use

• Use when this upstream workflow matches the user's stated goal.
• Use when the task requires the procedures documented in this skill.

Makepad 2.0 Layout System

Makepad uses a layout turtle system -- not CSS flexbox, not CSS grid. The turtle walks through children one by one, placing each widget according to two core concepts:

• Walk -- how a widget sizes itself (width, height, margin)
• Layout -- how a container arranges its children (flow, spacing, padding, align)

Every container widget (View, SolidView, RoundedView, ScrollYView, etc.) has both Walk properties (its own size) and Layout properties (how it lays out children).

Walk System (Widget Sizing)

Walk controls how an individual widget claims space inside its parent.

width / height

use mod.prelude.widgets.*

// Fill: takes all available width
View{
    width: Fill height: Fit
    flow: Down
    Label{text: "I stretch to fill the width"}
}

// Fit: shrinks to content
View{
    width: Fit height: Fit
    padding: 10
    Label{text: "I am only as wide as this text"}
}

// Fixed: exact pixel size
View{
    width: 300 height: 200
    Label{text: "I am exactly 300x200 pixels"}
}

// Constrained Fill: fills but within bounds
View{
    width: Fill{min: 200 max: 600} height: Fit
    flow: Down padding: 16
    Label{text: "I fill available space but stay between 200-600px"}
}

CRITICAL: height: Fit on Containers

This is the number one layout bug in Makepad.

The default height is Fill. When your output renders inside a Fit container, Fill inside Fit creates a circular dependency and resolves to 0 pixels. Your entire UI becomes invisible.

Rule: ALWAYS set height: Fit on every View, SolidView, RoundedView, and similar container unless the parent has a fixed or Fill height.

// CORRECT -- height: Fit makes the container visible
View{
    width: Fill height: Fit
    flow: Down padding: 10
    Label{text: "I am visible"}
}

// WRONG -- defaults to height: Fill, resolves to 0px, invisible
View{
    width: Fill
    flow: Down padding: 10
    Label{text: "I am invisible (0px tall)"}
}

Exceptions where height: Fill is acceptable:

1. Inside a fixed-height parent:

View{
    height: 400
    View{
        height: Fill
        Label{text: "I fill the 400px parent"}
    }
}

2. Inside a height: Fill chain that ultimately reaches a known size (e.g., Window body).
3. ScrollYView always uses height: Fill because it must fill its parent to scroll.

margin

Margin adds space around the outside of a widget.

// Uniform margin on all sides
Label{text: "Hello" margin: 10}

// Selective margin with Inset
Label{
    text: "Indented"
    margin: Inset{top: 5 bottom: 5 left: 20 right: 20}
}

// Zero margin (note the trailing dot for float literal)
Label{text: "Flush" margin: 0.}

Layout System (Child Arrangement)

Layout controls how a container positions its children.

flow (Direction)

use mod.prelude.widgets.*

// Vertical stack (most common)
View{
    width: Fill height: Fit
    flow: Down spacing: 10
    Label{text: "First"}
    Label{text: "Second"}
    Label{text: "Third"}
}

// Horizontal row
View{
    width: Fill height: Fit
    flow: Right spacing: 10
    Label{text: "Left"}
    Label{text: "Center"}
    Label{text: "Right"}
}

// Overlay -- children stacked on top of each other

…