Widgets and layout

The built-in widgets

Widget	Use
Flex	The workhorse container: layout, style, hover, scroll, animation and lifecycle
Text	A run of text
TextInput	Editable text, single- or multi-line
Image, Svg	Raster and vector images
Grid	Grid layout
Presence	Animates between generations of content
Portal	Content drawn above the tree: menus, tooltips, dialogs
Canvas	A rectangle the host paints
Slider, Pad	One- and two-axis value controls

Flex owns the heavy machinery. The other containers wrap it or specialise it, so most style properties work the same way everywhere.

Sizing

width and height take one of:

• "grow": take a share of the parent's leftover space.
• "shrink": fit the content.
• A number: fixed, in logical pixels.
• A percentage of the parent.

A grow child inside a shrink parent contributes its content size while the parent measures itself, then stretches to the parent's final size. That is how a full-height accent bar fits a row exactly.

A styled container

Flex {
  style: {
    width: "grow",
    height: "grow",
    direction: "column",
    main_alignment: "center",
    cross_alignment: "center",
    padding: 24,
    gap: 12,
    corner_radius: 10,
    background_color: { r: 30, g: 30, b: 30, a: 255 },
    border: { width: 1, color: { r: 90, g: 90, b: 104, a: 255 }, style: "solid" },
  },
  children: [
    Text {
      text: "Hello, world!",
      style: { size: 18, color: { r: 255, g: 255, b: 255, a: 255 } },
    },
  ],
}

Unknown keys

Masque ignores a style key or value it does not recognise, so a typo like font_size (the key is size) draws without complaint. Turn on strict vocabulary during development to have these reported:

let config = RuntimeConfig::new().with_strict_vocabulary();

Strict vocabulary changes nothing about what is drawn. It reports each unknown key once rather than failing mid-frame.

TODO: a full style-property reference, generated from the vocabulary tables.