Macro element 

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

Declarative element tree macro.

Builds an Elements list from JSX-like syntax. This is the primary way to describe UI trees in eye_declare.

Syntax

element! {
    // Component with props
    Spinner(label: "Loading...", done: false)

    // Component with children (slot)
    VStack {
        "hello"
    }

    // Key for stable identity across rebuilds
    Markdown(key: "intro", source: "# Hello".into())

    // String literal shorthand (becomes a TextBlock)
    "Some plain text"

    // Conditional children
    #(if state.loading {
        Spinner(label: "Please wait...")
    })

    // Loop children
    #(for item in &state.items {
        Markdown(key: item.id.clone(), source: item.text.clone())
    })

    // Splice pre-built Elements
    #(footer_elements(state))
}

The macro returns an Elements value. View functions typically return this directly:

fn my_view(state: &MyState) -> Elements {
    element! {
        Spinner(label: "working...")
    }
}

Declarative element tree macro — the primary way to build UIs in eye_declare.

Returns an Elements list from JSX-like syntax. View functions typically return the result directly:

fn my_view(state: &AppState) -> Elements {
    element! {
        VStack {
            Markdown(key: format!("msg-{}", state.id), source: state.text.clone())
            #(if state.thinking {
                Spinner(key: "thinking", label: "Thinking...")
            })
            "---"
        }
    }
}

Syntax reference

Syntax	Description
Component(prop: val)	Construct with props (struct field init)
Component { ... }	Component with children (slot or data)
Component(props) { children }	Props and children
"text"	String literal — auto-wrapped as TextBlock
#(if cond { ... })	Conditional children
#(if let pat = expr { ... })	Pattern-matching conditional
#(for pat in iter { ... })	Loop children
#(expr)	Splice a pre-built Elements value inline

Keys

key is a special prop — it maps to .key() on the element handle, not a struct field. Keys provide stable identity for reconciliation: keyed elements survive reordering with their state preserved.

element! {
    #(for (i, item) in items.iter().enumerate() {
        Markdown(key: format!("item-{i}"), source: item.clone())
    })
}