minimal, obvious, graphical widget application interface

mogwai is a Rust crate for building GUI applications, primarily in the browser, with cross-platform capabilities.

Overview

mogwai simplifies web app development by addressing challenges with web-sys, focusing on:

• Element creation and styling
• Event handling
• Server-side rendering and cross-platform support

It offers a minimalistic and transparent approach, allowing you to structure your app freely.

Key Concepts

• View Construction: Use the rsx! macro for intuitive view building.
• Event Handling: Events are futures, not callbacks.
• Cross-Platform: Traits ensure operations are cross-platform, with room for specialization.
• Idiomatic Rust: Widgets are Rust types

Example

Here's a button that counts clicks:

use std::future::Future;

use mogwai::web::prelude::*;
use wasm_bindgen::prelude::*;

#[derive(ViewChild)]
pub struct ButtonClick<V: View> {
    #[child]
    wrapper: V::Element,
    on_click: V::EventListener,
    num_clicks: Proxy<u32>,
}

impl<V: View> Default for ButtonClick<V> {
    fn default() -> Self {
        let num_clicks = Proxy::<u32>::default();

        rsx! {
            let wrapper = button(
                style:cursor = "pointer",
                on:click = on_click
            ) {
                // When the `num_clicks` proxy is updated it will replace this node.
                {num_clicks(n => match *n {
                    1 => "Click again.".to_string(),
                    n => format!("Clicked {n} times."),
                })}
            }
        }

        Self {
            wrapper,
            on_click,
            num_clicks,
        }
    }
}

impl<V: View> Step for ButtonClick<V> {
    type Output = ();
    fn step(&self) -> impl Future<Output = ()> {
        async move {
            let _ev = self.on_click.next().await;
            self.num_clicks.modify(|n| *n += 1);
        }
    }
}

#[wasm_bindgen(start)]
pub fn main() {
    let view = ButtonClick::<Web>::default();
    mogwai::web::body().append_child(&view);
    wasm_bindgen_futures::spawn_local(async move {
        loop {
            view.step().await;
        }
    });
}

Getting Started

1. Install the Rust toolchain from https://rustup.rs/.
2. Install trunk.
3. Use cargo-generate to start a new project:

cargo install cargo-generate
cargo generate --git https://github.com/schell/mogwai-template.git
cd your_project_name
trunk serve --config Trunk.toml

Resources

• Introduction and Documentation
• Cooking with Mogwai
• Examples

Community

Join the conversation on Element or via Matrix.

Support

Consider sponsoring on GitHub to support development.