The Rust Yew Framework

This is my first experience using the Rust framework ”Yew

Everything inside the border above is rendered with yew! A nice win, but it’s just a simple counter demo.

You should see a title, “Counter”, a button to increment and a readout of the count. It (hopefully) works for you!

To get it working, I created an empty div with the same root_id, so I can easily position it on the page via my react code.

fn main() {
    let root_id: &str = "yew-basic-counter";
    let document = web_sys::window().unwrap().document().unwrap();
    let root = document.get_element_by_id(root_id).unwrap();
    let initial_value: u16 = root.get_attribute("initialCount").unwrap_or_else(|| "0".to_string()).parse().unwrap_or(0);
    // yew::Renderer::<BasicCounter>::new().render();
    yew::Renderer::<BasicCounter>::with_root(root).render();
}

The build outputs a .wasm file which you can import and run as you would any other wasm file. Neat.

Created: 28/02/2023
Last Updated: 16/06/2025