minimal, obvious, graphical widget application interface
mogwai is a Rust crate for building GUI applications, primarily in the browser, with cross-platform capabilities.
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.
- 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
Here's a button that counts clicks:
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 mut 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> ButtonClick<V> { pub async fn step(&mut self) { let _ev = self.on_click.next().await; self.num_clicks.modify(|n| *n += 1); } } #[wasm_bindgen(start)] pub fn main() { let mut view = ButtonClick::<Web>::default(); mogwai::web::body().append_child(&view); wasm_bindgen_futures::spawn_local(async move { loop { view.step().await; } }); }- Install the Rust toolchain from https://rustup.rs/.
- Install trunk.
- Use
cargo-generateto 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.tomlJoin the conversation on Element or via Matrix.
Consider sponsoring on GitHub to support development.