UI Layout Catalog
A breadth-first survey of UI layout libraries and the layout subsystems embedded in major UI/TUI/GUI frameworks. This catalog complements the TUI Libraries Catalog by zooming in on the layout dimension specifically: how widgets get sizes and positions, what primitives are exposed to the developer, and what algorithm runs underneath.
The scope is deliberately broad. We cover renderer-agnostic layout libraries (Clay, Yoga, Taffy), web platform layout specifications (CSS Flexbox, CSS Grid, Normal Flow), modern declarative GUI frameworks (SwiftUI, Jetpack Compose, Flutter), traditional desktop GUI layouts (WPF/XAML, Qt, GTK), JVM and Apple stacks (Swing/MiG, Auto Layout), Android (ConstraintLayout), classical Tk geometry managers, immediate-mode UI layout (Dear ImGui, egui), tiling window managers (i3/sway, xmonad), and the foundational typesetting algorithm of Knuth-Plass. Each entry has its own detailed write-up.
Renderer-agnostic layout libraries
| Library | Language | Layout Model | Sizing Vocabulary | Status | Links |
|---|---|---|---|---|---|
| Clay | C | Box-flow (row/column) | FIT / GROW / FIXED / PERCENT + min/max | Active | repo |
| Yoga | C++ | Flexbox (CSS subset) | flex-grow / flex-shrink / flex-basis | Active | repo / docs |
| Taffy | Rust | Flexbox + CSS Grid + CSS Block | CSS Length / Percent / Auto / Fr / etc. | Active | repo |
| Stretch | Rust | Flexbox (CSS subset) | flex-grow / flex-shrink / flex-basis | Archived | repo |
| Kiwi | C++ / Py | Linear constraint solver | Variable + Constraint + Strength | Active | repo |
Foundational algorithms
| Algorithm | Domain | Year | Reference Implementations | Links |
|---|---|---|---|---|
| Cassowary | Linear constraints | 1997 | Apple Auto Layout, GTK 4, kiwisolver, Cassowary.js, Cassowary.py | paper |
| Knuth-Plass | Line breaking | 1981 | TeX, LuaTeX, SILE, knuth-plass.js, several CSS engine experiments | paper |
Web platform layout specs
| Specification | Level / Year | Browsers Interop | Non-browser Implementations |
|---|---|---|---|
| CSS Normal Flow | CSS 2.1 (2011) / Display 3 | Universal | Foundational; every other CSS layout mode is a deviation from it |
| CSS Flexbox | Level 1 (2017) / Level 2 | Universal | Yoga, Taffy, Stretch, Ink, Textual |
| CSS Grid | Level 1 (2017) / Level 2 | Universal | Taffy; rare in TUI libraries |
Modern declarative GUI framework layouts
| Framework | Language | Layout Protocol | Sizing Vocabulary | Cross-link |
|---|---|---|---|---|
| SwiftUI | Swift | Propose-and-respond | min / ideal / max preferred sizes | Apple-only |
| Jetpack Compose | Kotlin | Measure / place | Constraints(minWidth, maxWidth, ...) | Mosaic ports the runtime to terminals |
| Flutter | Dart | Constraints down, sizes up | BoxConstraints (tight / loose) | - |
Traditional desktop GUI layouts
| Framework | Language | Layout Model | Sizing Vocabulary | Notable lineage |
|---|---|---|---|---|
| WPF / XAML | .NET (XAML+C#) | Two-pass Measure / Arrange | Auto / Star (*) / pixel + alignment | Inherited by Silverlight, UWP, .NET MAUI, Avalonia, Uno |
| Qt Layouts | C++ / QML | Box / Grid / Form / Stacked | QSizePolicy + stretch factor | QHBoxLayout / QVBoxLayout / QGridLayout / QFormLayout |
| GTK 4 | C (with bindings) | Pluggable GtkLayoutManager | halign / valign + hexpand / vexpand | GtkBoxLayout, GtkGridLayout, GtkConstraintLayout (Cassowary) |
| Swing / MiG Layout | Java | LayoutManager interface | preferred / min / max + per-manager constraints | FlowLayout, BorderLayout, GridLayout, BoxLayout, GridBagLayout, GroupLayout, MiG |
| Tk geometry managers | Tcl/Tk | pack / grid / place | -side, -fill, -expand (pack); -sticky, -weight (grid) | Originated 1990; predates most modern layout APIs |
Apple / Android constraint-based
| System | Platform | Solver | Adoption |
|---|---|---|---|
| Auto Layout | UIKit / AppKit | Cassowary | macOS 10.7 (2011), iOS 6 (2012), still the substrate of UIKit |
| Android ConstraintLayout | Android Views | Cassowary-derivative | Android Studio default for new layouts since 2017 |
Immediate-mode layout
| Library | Language | Layout Style | Companion TUI Port |
|---|---|---|---|
| Dear ImGui | C++ | Cursor-based + Tables API | ImTui |
| egui | Rust | Cursor-based with retained sizing | - |
Tiling and structural layout
| System | Algorithm | Configuration |
|---|---|---|
| i3 / sway | Binary split-container tree | Plain text config + IPC |
| xmonad | Functional layout combinators (typeclass) | Haskell |
TUI layout models (cross-references)
These libraries are documented in the TUI Libraries Catalog; this section pulls out their layout subsystem for direct comparison with the dedicated layout libraries above.
| Library | Layout Approach | Sizing Vocabulary |
|---|---|---|
| Ratatui (Rust) | Constraint solver on Rects | Length(n) / Percentage(p) / Ratio(a, b) / Min(n) / Max(n) / Fill(n) |
| Textual (Python) | CSS subset (Flexbox-like + Grid) | CSS keywords (auto, 1fr, 100%, fixed) plus dock |
| Ink (JavaScript) | Yoga (Flexbox) | Yoga flex-grow / flex-basis etc. - see Yoga |
| FTXUI (C++) | Functional combinators (hbox, vbox, gridbox) | size(WIDTH, EQUAL, n) decorators |
| Brick (Haskell) | Pure-functional combinators | padLeftRight, hLimit, vLimit, padded, border |
| tview (Go) | Flex with proportions | Fixed size + proportional weight |
| Cursive (Rust) | LinearLayout / nested views | Min size with caller-controlled bounds |
| Notcurses (C) | Planes (absolute positioning) + helpers | Manual rectangle math |
| Mosaic (Kotlin) | Jetpack Compose runtime on terminal | See Jetpack Compose |
| Nottui (OCaml) | Functional reactive layout | Box combinators with stretch |
| libvaxis (Zig) | Imperative | Manual |
| ImTui (C++) | Dear ImGui on terminal | See Dear ImGui |
| snacks.nvim (Lua) | Floating windows on Neovim's window/buffer model | Window-row/col grid + size hints |
| broot (Rust) | Custom (built on Ratatui) | - |
Architectural Taxonomy
By Sizing Vocabulary
| Vocabulary | Description | Libraries |
|---|---|---|
| Fit / Grow / Fixed / Percent | Small primitives with optional min/max clamps; siblings with GROW share equally | Clay |
| Flex-grow / shrink / basis | CSS Flexbox sibling weighting along main axis | Yoga, CSS Flexbox, Taffy, Stretch, Ink |
| Linear constraints (Cassowary) | Variables linked by =, <=, >= with strength priorities | Cassowary, Kiwi, Auto Layout, Android ConstraintLayout, GTK 4 ConstraintLayout |
Grid template (fr, minmax) | Track-based two-axis grid with named lines / areas | CSS Grid, Taffy, WPF Grid (* star sizing close cousin) |
| Star sizing | Proportional sibling weights (*, 2*) | WPF / XAML, Qt (stretch factor) |
| Per-side stickiness / fill | Anchor to one or more edges of a cell | Tk (grid -sticky nsew), GridBagLayout (anchor / fill) |
| Tight / loose constraints | Constraints flow down, sizes flow up; each box answers a (minW, maxW, minH, maxH) | Flutter, Compose |
| Propose-and-respond | Parent proposes an optional (width?, height?); child returns a CGSize | SwiftUI |
| Cursor + auto-advance | Layout cursor moves after each widget; explicit SameLine for horizontal flow | Dear ImGui, egui, ImTui |
| Tiling tree | Binary split tree; new windows insert as siblings; resize via proportions | i3 / sway, xmonad |
| Optimal line breaking | Dynamic programming over breakpoints with glue / penalty model | Knuth-Plass |
By Measure / Arrange Protocol
| Protocol | Description | Libraries |
|---|---|---|
| Single-pass top-down | Parent passes constraints; child reports size; no second pass | Flutter, Compose |
| Two-pass Measure / Arrange | Phase 1 collects desired sizes bottom-up; phase 2 distributes space top-down | WPF / XAML, GTK 4, Qt, Swing, SwiftUI (effectively) |
| Iterative solver | Constraint solver runs to a stable solution | Cassowary, Kiwi, Auto Layout, Android ConstraintLayout |
| Immediate / cursor-based | No measure pass; widgets are placed in order they are issued | Dear ImGui, egui |
| Combinator algebra | Layout is a pure function from Rectangle to placements | xmonad, Brick, Nottui, FTXUI |
| Render-command emission | Layout pass produces a list of draw commands; renderer agnostic | Clay |
By Embedding
| Embedding | Definition | Examples |
|---|---|---|
| Standalone layout library | Just sizing and positioning; renderer is the application's responsibility | Clay, Yoga, Taffy, Stretch, Kiwi |
| Spec without bundled implementation | Definition of behavior; many engines implement it | CSS Flexbox, CSS Grid, CSS Normal Flow, Cassowary, Knuth-Plass |
| Baked into a GUI framework | Layout types are part of a larger widget system | SwiftUI, Compose, Flutter, WPF, Qt, GTK 4, Swing, Auto Layout |
| Baked into a window manager / WM-like tool | Layout is the product; UI affordances are minimal | i3 / sway, xmonad |
| Embedded as a TUI sublayer | The layout primitives are wired through a terminal renderer | All TUI libraries |
Detailed Studies
The following entries are analysed in depth.
Pure layout libraries
- Clay - single-header C library; sizing primitives
FIT/GROW/FIXED/PERCENT; render-command emission - Yoga - Meta's cross-platform Flexbox; the engine behind Ink and React Native
- Taffy - Rust; supports CSS Flexbox + Grid + Block; used by Dioxus, Bevy, Zed
- Stretch - Taffy's archived Flexbox-only predecessor
- Kiwi - C++ Cassowary implementation; the engine in
kiwisolver, Matplotlib'sconstrained_layout, enaml
Foundational algorithms
- Cassowary - linear arithmetic constraint solver (Badros & Borning, 1997); the substrate of iOS Auto Layout
- Knuth-Plass - optimal line breaking via dynamic programming (1981); the algorithm in TeX, SILE, and (selectively) modern browsers
Web platform layout specs
- CSS Normal Flow - block / inline formatting contexts, the box model, margin collapsing, floats, position
- CSS Flexbox - one-axis flex container; main / cross axes; the spec that birthed Yoga
- CSS Grid - two-axis grid with tracks, lines, areas, subgrid,
frunit,minmax,auto-fill/auto-fit
Modern declarative GUI framework layouts
- SwiftUI - HStack / VStack / ZStack / Grid; propose-and-respond protocol;
Layoutprotocol for custom layouts (iOS 16+) - Jetpack Compose - Row / Column / Box / ConstraintLayout; measure-and-place protocol;
Modifier.layout; intrinsic measurements - Flutter - Row / Column / Stack / Wrap / Flex; constraints-down-sizes-up;
RenderBoxprotocol
Traditional desktop GUI layouts
- WPF / XAML - Grid (with
*star sizing) / StackPanel / DockPanel / WrapPanel / Canvas; Measure / Arrange protocol; inherited by Avalonia, UWP, MAUI - Qt Layouts - QHBoxLayout / QVBoxLayout / QGridLayout / QFormLayout / QStackedLayout; QSizePolicy + stretch factor; QML alternatives
- GTK 4 - pluggable
GtkLayoutManager; GtkBoxLayout, GtkGridLayout, GtkConstraintLayout (Cassowary), GtkOverlayLayout - Swing / MiG Layout - AWT
LayoutManagerfamily; the GridBagLayout case study; GroupLayout; MiG's declarative constraint strings - Tk geometry managers -
pack(1990),grid(1996),place; the classical layout API that influenced AWT and many others
Apple / Android constraint-based
- Auto Layout - Cassowary in production; NSLayoutConstraint, anchors, intrinsic content size, content hugging / compression resistance
- Android ConstraintLayout - flat hierarchy with anchored constraints, guidelines, barriers, chains; the modern Android default
Immediate-mode layout
- Dear ImGui - cursor-based layout; Columns (legacy) and Tables API (since 1.80)
- egui - Rust immediate mode with retained sizing memory; horizontal / vertical / columns
Tiling and structural layout
- i3 / sway - binary split-container tree; configurable in plain text; the canonical modern tiling WM
- xmonad - layouts as typeclass values composed with
|||; pure-Haskell window arrangement
Comparative
A focused cross-library comparison is in the TUI Libraries Comparison. A follow-up comparison.md for layout libraries specifically may be added here as the catalog matures.