Struct Elements 

pub struct Elements { /* private fields */ }

A list of component descriptions for declarative tree building.

Elements is what view functions return and what the framework reconciles against the existing component tree. Build one with the element! macro or the imperative API:

// With the element! macro (preferred):
fn my_view(state: &MyState) -> Elements {
    element! {
        "Hello"
        #(if state.loading {
            Spinner(key: "spinner", label: "Loading...")
        })
    }
}

// Imperative API:
fn my_view(state: &MyState) -> Elements {
    let mut els = Elements::new();
    els.add(TextBlock::new().unstyled("Hello"));
    if state.loading {
        els.add(Spinner::new("Loading...")).key("spinner");
    }
    els
}

Implementations

impl Elements

pub fn new() -> Self

Create an empty element list.

Examples found in repository

examples/lifecycle.rs (line 113)

fn task_view(state: &AppState) -> Elements {
    let mut els = Elements::new();

    els.add(
        TextBlock::new().line(
            format!("Tasks ({})", state.tasks.len()),
            Style::default()
                .fg(Color::White)
                .add_modifier(Modifier::BOLD),
        ),
    );

    for task in &state.tasks {
        els.add(StatusLog::new(task)).key(task.clone());
    }

    if state.processing {
        els.add(Spinner::new("Processing...")).key("spinner");
    }

    els.add(TextBlock::new().line("---", Style::default().fg(Color::DarkGray)));

    els
}

examples/declarative.rs (line 42)

fn chat_view(state: &AppState) -> Elements {
    let mut els = Elements::new();

    // Render all messages with stable keys
    for (i, msg) in state.messages.iter().enumerate() {
        els.add(Markdown::new(msg)).key(format!("msg-{i}"));
    }

    // Show thinking spinner if active (auto-animates via tick registration)
    if state.thinking {
        els.add(Spinner::new("Thinking...")).key("thinking");
    }

    // Show tool call spinner if active (auto-animates via tick registration)
    if let Some(ref tool) = state.tool_running {
        els.add(Spinner::new(format!("Running {}...", tool)))
            .key("tool");
    }

    // Separator at the bottom
    if !state.messages.is_empty() || state.thinking || state.tool_running.is_some() {
        els.add(TextBlock::new().line("---", Style::default().fg(Color::DarkGray)));
    }

    els
}

examples/chat.rs (line 226)

fn chat_view(state: &AppState) -> Elements {
    let mut els = Elements::new();

    for msg in &state.messages {
        let key = format!("msg-{}", msg.id);
        match &msg.kind {
            MessageKind::User(text) => {
                els.add(
                    TextBlock::new().line(
                        format!("> {}", text),
                        Style::default()
                            .fg(Color::Cyan)
                            .add_modifier(Modifier::BOLD),
                    ),
                )
                .key(key);
            }
            MessageKind::Assistant { content, done } => {
                if *done {
                    els.add(Markdown::new(content)).key(key);
                } else if content.is_empty() {
                    els.add(StreamingDots).key(key);
                } else {
                    // Show content with a blinking cursor
                    els.add(Markdown::new(format!("{}▌", content))).key(key);
                }
            }
        }
    }

    // Separator
    els.add(TextBlock::new());

    // Input box
    els.add(InputBox {
        text: state.input.clone(),
        cursor: state.cursor,
        prompt: "You".into(),
    })
    .key("input");

    els
}

pub fn add<C: Component>(&mut self, component: C) -> ElementHandle<'_>

Add a component to the list.

Returns an ElementHandle that can be used to set a key for stable identity across rebuilds.

Examples found in repository

examples/lifecycle.rs (lines 115-122)

fn task_view(state: &AppState) -> Elements {
    let mut els = Elements::new();

    els.add(
        TextBlock::new().line(
            format!("Tasks ({})", state.tasks.len()),
            Style::default()
                .fg(Color::White)
                .add_modifier(Modifier::BOLD),
        ),
    );

    for task in &state.tasks {
        els.add(StatusLog::new(task)).key(task.clone());
    }

    if state.processing {
        els.add(Spinner::new("Processing...")).key("spinner");
    }

    els.add(TextBlock::new().line("---", Style::default().fg(Color::DarkGray)));

    els
}

examples/declarative.rs (line 46)

fn chat_view(state: &AppState) -> Elements {
    let mut els = Elements::new();

    // Render all messages with stable keys
    for (i, msg) in state.messages.iter().enumerate() {
        els.add(Markdown::new(msg)).key(format!("msg-{i}"));
    }

    // Show thinking spinner if active (auto-animates via tick registration)
    if state.thinking {
        els.add(Spinner::new("Thinking...")).key("thinking");
    }

    // Show tool call spinner if active (auto-animates via tick registration)
    if let Some(ref tool) = state.tool_running {
        els.add(Spinner::new(format!("Running {}...", tool)))
            .key("tool");
    }

    // Separator at the bottom
    if !state.messages.is_empty() || state.thinking || state.tool_running.is_some() {
        els.add(TextBlock::new().line("---", Style::default().fg(Color::DarkGray)));
    }

    els
}

examples/chat.rs (lines 232-239)

fn chat_view(state: &AppState) -> Elements {
    let mut els = Elements::new();

    for msg in &state.messages {
        let key = format!("msg-{}", msg.id);
        match &msg.kind {
            MessageKind::User(text) => {
                els.add(
                    TextBlock::new().line(
                        format!("> {}", text),
                        Style::default()
                            .fg(Color::Cyan)
                            .add_modifier(Modifier::BOLD),
                    ),
                )
                .key(key);
            }
            MessageKind::Assistant { content, done } => {
                if *done {
                    els.add(Markdown::new(content)).key(key);
                } else if content.is_empty() {
                    els.add(StreamingDots).key(key);
                } else {
                    // Show content with a blinking cursor
                    els.add(Markdown::new(format!("{}▌", content))).key(key);
                }
            }
        }
    }

    // Separator
    els.add(TextBlock::new());

    // Input box
    els.add(InputBox {
        text: state.input.clone(),
        cursor: state.cursor,
        prompt: "You".into(),
    })
    .key("input");

    els
}

pub fn add_with_children<C: Component>( &mut self, component: C, children: Elements, ) -> ElementHandle<'_>

Add a component with nested children.

The component is created first, then children are built as its descendants. The component’s children() method receives these as the slot parameter.

pub fn group(&mut self, children: Elements) -> ElementHandle<'_>

Add a VStack wrapper around the given children.

Equivalent to add_with_children(VStack, children).

pub fn hstack(&mut self, children: Elements) -> ElementHandle<'_>

Add an HStack wrapper around the given children.

Children default to WidthConstraint::Fill. Use .width(WidthConstraint::Fixed(n)) for fixed-width children.

pub fn splice(&mut self, other: Elements)

Splice another Elements list into this one.

All entries from other are appended to this list. This is used by the element! macro’s #(expr) syntax to interpolate pre-built Elements inline.

Trait Implementations

impl<C: Component> AddTo<Elements> for ComponentWithSlot<C>

type Handle<'a> = ElementHandle<'a>

Handle returned after adding. Supports .key() / .width() chaining.

fn add_to(self, els: &mut Elements) -> ElementHandle<'_>

Add this value to the collector, returning a handle for chaining .key() and .width().

impl Default for Elements

fn default() -> Self

Returns the “default value” for a type.

impl SpliceInto<Elements> for Elements

fn splice_into(self, collector: &mut Elements)

Splice all entries from this value into the collector.