Skip to content
UrushiDocumentation
Urushi

Layout

Layout determines where a View’s cells go and how much space they receive. It is not a second presentation model: layout operations construct and resolve the same View used by CLI output, prompts, TUIs, Canvas, and the Ratatui adapter.

Choose a layout tool

Section titled “Choose a layout tool”
Need Use Read
Margin, border, padding, dimensions, alignment, or overflow around one child View::block with BlockStyle Block geometry
Horizontal or vertical flow View::row or View::column Rows and columns
Shared column widths without table semantics View::grid with GridStyle Grid
A finite window onto larger content View::viewport Viewports and anchors
Report final geometry to a cursor, image, or host renderer View::anchor or View::anchor_block Viewports and anchors
Explicit coordinates, overlap, or connected lines View::canvas Canvas

BlockStyle contains both geometry and the appearance of cells created by a block. Its Rust name describes the value applied to a block; in this site its margin, border, padding, dimensions, alignment, and overflow are documented under Layout because those are layout tasks. Cell color and attributes remain under Styles.

See the layout tools

Section titled “See the layout tools”
margin
┌─ border ─┐
│ padding  │
│ content  │
└──────────┘
Block geometry Margin, border, padding, dimensions, alignment, and overflow. 
row:    A │ B │ C

column: A
B
Rows and columns Flow, cross-axis alignment, fixed sizes, and weighted fill. 
Name    State
core    ready
prompt  ready
Grid and viewport Shared columns, finite projections, and resolved anchors.

Run the complete Layout quickstart ↓

Quickstart

Section titled “Quickstart”

This complete example gives two children weighted horizontal space inside a finite row:

use std::io;


use urushi::{BlockStyle, Border, Length, TextStyle, VerticalAlign, View};


fn main() -> io::Result<()> {
    let panel = |label, weight| {
        View::block(
            BlockStyle::new()
                .border(Border::ROUNDED)
                .width(Length::fill(weight)),
            View::text(label, TextStyle::new()),
        )
    };
    let row = View::row(
        VerticalAlign::Top,
        [panel("build", 1), panel("tests", 2)],
    );
    let view = View::block(BlockStyle::new().width(30), row);


    urushi::println_view(&view)
}

With 30 available columns, fill weights 1 and 2 divide the row into 10 and 20 columns:

Rendered output
╭────────╮╭──────────────────╮
│build   ││tests             │
╰────────╯╰──────────────────╯

The row owns horizontal allocation. Each block then resolves its border and child inside the width it receives. The resulting value is still one View and can be rendered by any Urushi surface.

Continue by task

Section titled “Continue by task”