https://github.com/wishawa/async_ui

Lifetime-Friendly, Component-Based, Retained-Mode UI Powered by Async Rust
https://github.com/wishawa/async_ui

async rust ui

Last synced: 5 days ago
JSON representation

Lifetime-Friendly, Component-Based, Retained-Mode UI Powered by Async Rust

• Host: GitHub
• URL: https://github.com/wishawa/async_ui
• Owner: wishawa
• License: mpl-2.0
• Created: 2022-03-21T07:51:46.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-03-09T19:28:14.000Z (9 months ago)
• Last Synced: 2024-11-30T16:11:42.464Z (12 days ago)
• Topics: async, rust, ui
• Language: Rust
• Homepage:
• Size: 2.99 MB
• Stars: 554
• Watchers: 16
• Forks: 11
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-2d-graphics-rendering - async-ui - Friendly, Component-Based, Retained-Mode UI Powered by Async Rust (UI Framework / Native)

README

        
# Async UI

[](https://crates.io/crates/async_ui_web)

[](https://docs.rs/async_ui_web)

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](https://docs.rs/web-sys/latest/web_sys/)).

[See hosted demos](https://wishawa.github.io/async_ui/demos/index.html)

[Get Started Now!](https://wishawa.github.io/async_ui/book/index.html)

## 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](https://wishawa.github.io/async_ui/book/in-depth/framework-design.html)

## Example Code: Hello World

```rust

async fn hello_world() {

    "Hello World".render().await;

}

```

## Example Code: Async Control Flow

```rust

async fn app() {

    let resource = loading_indicator(

        fetch_resource()

    ).await;

    show_resource(&resource).await;

}

```

## Example Code: Counter

```rust

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;

}

```