Macro ui 

ui!() { /* proc-macro */ }

A declarative markup macro for building GPUI UIs.

Syntax

Basic Elements

ui! { div {} }                        // -> div()
ui! { div @[flex] {} }                // -> div().flex()
ui! { div @[w: px(200.0)] {} }        // -> div().w(px(200.0))

Children

// Comma-separated children
ui! {
    div {
        "First",
        "Second",
    }
}
// -> gpui::ParentElement::child(gpui::ParentElement::child(div(), "First"), "Second")

Spread Children

Use ..expr to spread an iterable as children:

let items: Vec<Div> = vec![div(), div()];

ui! {
    div {
        ..items,
    }
}
// -> gpui::ParentElement::children(div(), items)

// Can be mixed with regular children
ui! {
    div {
        "Header",
        ..items,
        "Footer",
    }
}
// -> gpui::ParentElement::child(
//      gpui::ParentElement::children(
//        gpui::ParentElement::child(div(), "Header"),
//        items
//      ),
//      "Footer"
//    )

Method Chains

Use .method(args) to insert method calls at any position. Supports method chains and generics:

ui! {
    div {
        "static child",
        .when(condition, |d| d.child("dynamic")),
        .flex().gap_2(),
        .map::<Div, _>(|d| d),
    }
}

Comments

Use standard Rust comments (// or /* */) inside ui!.

Expression Elements

Any expression can be used as an element (braces required at top level):

ui! { Button::new("Click") {} }              // -> Button::new("Click")
ui! { Button::new("Click") @[style: Primary] {} }
                                             // -> Button::new("Click").style(Primary)
ui! {
    div().flex() @[flex_col] {
        "Content",
    }
}
// -> gpui::ParentElement::child(div().flex().flex_col(), "Content")

// Parentheses for complex expressions (braces optional)
ui! { (a + b) }                              // -> a + b

Why braces at top level? The ui! macro builds a component tree. Braces declare “this is a UI element” - they mark it as a tree node, trigger implicit ::new() for components, and provide a place for attributes and children.

Multi-value Attributes

Use tuples for attributes with multiple arguments:

ui! { div @[when: (condition, |d| d.flex())] {} }
// -> div().when(condition, |d| d.flex())