Async UI

A web UI framework where Futures are components.

Overview (for the User)

Async UI is...

• Easy; if you know what Futures are and how to join them, you know 90% of Async UI already.
• Just async Rust; no DSL or opaque runtime - leverage existing Async Rust patterns and ecosystem.
• Flexible; you get direct access to the entire Web API (through web_sys).

See hosted demos

Get Started Now!

Overview (for the UI Framework Connoisseur)

• Async as UI Runtime; the app is one long-running Future.
• Components are Futures; composition is done by nesting and joining Futures.
• UI as Side-Effect; running a Future displays its UI, dropping it removes that UI.

Read more about the framework

Example Code: Hello World

async fn hello_world() {
    "Hello World".render().await;
}

Example Code: Async Control Flow

async fn app() {
    let resource = loading_indicator(
        fetch_resource()
    ).await;
    show_resource(&resource).await;
}

Example Code: Counter

async fn counter() {
    let mut count = 0;
    let value_text = Text::new();
    let incr_button = Button::new();
    join((
        value_text.render(),
        incr_button.render("Increment".render()),
        async {
            loop {
                value_text.set_data(&count.to_string());
                incr_button.until_click().await;
                count += 1;
            }
        },
    ))
    .await;
}