Skip to content

Constraint Demos

This page lists a runnable demo that uses the helper-first constraint layer in a realistic layout.

See also: - docs/getting-started/constraints-quickstart.md - docs/reference/constraints-api.md - docs/dev/live-pty-debugging.md (frame-audit workflow)

Demo: Starship (responsive multi-panel app shell)

  • Source: packages/create-rezi/templates/starship/src/
  • Highlights:
  • viewport-driven display constraints for rails/strips
  • helper-first visibility constraints inside a larger app-shell layout

Run:

npx tsx packages/create-rezi/templates/starship/src/main.ts

Keys: - 1..6 switch routes - t cycle theme - q quit

Frame-audit (worker mode):

: > /tmp/rezi-frame-audit.ndjson
: > /tmp/starship.log
env -u NO_COLOR \
  REZI_STARSHIP_EXECUTION_MODE=worker \
  REZI_STARSHIP_DEBUG=1 \
  REZI_STARSHIP_DEBUG_LOG=/tmp/starship.log \
  REZI_FRAME_AUDIT=1 \
  REZI_FRAME_AUDIT_LOG=/tmp/rezi-frame-audit.ndjson \
  npx tsx packages/create-rezi/templates/starship/src/main.ts
node scripts/frame-audit-report.mjs /tmp/rezi-frame-audit.ndjson --latest-pid