Constraints Quickstart (10 minutes)
Constraints let you declare derived layout intent (viewport/parent/sibling/intrinsic relationships) without manual math in view code.
Constraints let you declare derived layout intent (viewport/parent/sibling/intrinsic relationships) without manual math in view code.
Default path:
- Use helper constraints (
visibilityConstraints,widthConstraints,heightConstraints,spaceConstraints,groupConstraints,conditionalConstraints)
Advanced path:
- Use
expr("...")for custom rules
See also:
docs/guide/layout-decision-tree.mddocs/guide/constraints.mddocs/reference/constraints-api.md
1) Import helpers
import {
ui,
visibilityConstraints,
widthConstraints,
heightConstraints,
spaceConstraints,
groupConstraints,
} from "@rezi-ui/core";2) Responsive 3-panel shell (sidebar + main + detail rail)
ui.row({ gap: 1, width: "full", height: "full" }, [
ui.box(
{
id: "nav",
border: "single",
p: 1,
width: widthConstraints.clampedPercentOfParent({ ratio: 0.22, min: 18, max: 32 }),
display: visibilityConstraints.viewportWidthAtLeast(70),
},
[ui.text("Navigation")],
),
ui.box(
{
id: "main",
border: "single",
p: 1,
width: spaceConstraints.remainingWidth({ subtract: [{ id: "nav" }, { id: "rail" }], minus: 2 }),
},
[ui.text("Main content")],
),
ui.box(
{
id: "rail",
border: "single",
p: 1,
width: widthConstraints.clampedPercentOfParent({ ratio: 0.28, min: 26, max: 44 }),
display: visibilityConstraints.viewportAtLeast({ width: 110, height: 28 }),
},
[ui.text("Details")],
),
])3) Equal-width labels (forms / inspectors)
ui.column({ gap: 1 }, [
ui.row({ gap: 2 }, [
ui.box({ id: "kv-key", width: groupConstraints.maxSiblingMinWidth("kv-key"), border: "none", p: 0 }, [
ui.text("Latency", { dim: true }),
]),
ui.text("12ms"),
]),
ui.row({ gap: 2 }, [
ui.box({ id: "kv-key", width: groupConstraints.maxSiblingMinWidth("kv-key"), border: "none", p: 0 }, [
ui.text("Error Rate", { dim: true }),
]),
ui.text("0.2%"),
]),
])4) Intrinsic-aware modal sizing
ui.modal({
id: "help",
title: "Commands",
width: widthConstraints.clampedIntrinsicPlus({ pad: 8, min: 44, max: "parent" }),
height: heightConstraints.clampedIntrinsicPlus({ pad: 4, min: 10, max: "parent" }),
content: ui.column({ gap: 1 }, [ui.text("q : quit"), ui.text("h : close")]),
})5) Debug and validate
- For syntax/allowlist details, use
docs/reference/constraint-expressions.md. - For runtime diagnosis, use
docs/guide/debugging-constraints.md. - For PTY + frame-audit evidence, use
docs/dev/live-pty-debugging.md.