{"id":11696,"date":"2025-08-23T13:19:24","date_gmt":"2025-08-23T13:19:24","guid":{"rendered":"https:\/\/putridparrot.com\/blog\/?p=11696"},"modified":"2025-08-23T17:18:36","modified_gmt":"2025-08-23T17:18:36","slug":"wasm-with-rust-and-yew","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/wasm-with-rust-and-yew\/","title":{"rendered":"WASM with Rust (and Yew)"},"content":{"rendered":"

In my previous post WASM with Rust (and Leptos)<\/a> we covered creating a Rust project which generate a binary for use within WASM, using Leptos and using Trunk to build and run it.<\/p>\n

There’s more than one framework for creating WASM\/WebAssembly projects in Rust, let’s look at another one, this time Yew<\/strong>.<\/p>\n

We’ll be using trunk (just as the previous post) to serve but I’ll repeat the step to install here<\/p>\n

\r\ncargo install trunk\r\n<\/pre>\n
I’m going to assume you’ve also added the target, but I’ll include here for completeness<\/p>\n
\r\nrustup target add wasm32-unknown-unknown\r\n<\/pre>\n
Getting started<\/strong><\/p>\n
We’re going to use a template to scaffold a basic Yew application, so create yourself a folder for your project then run<\/p>\n
\r\ncargo generate --git https:\/\/github.com\/yewstack\/yew-trunk-minimal-template\r\n<\/pre>\n
For mine I stuck with the defaults after naming it wasm_app<\/em>. So the stable Yew version and no logging.<\/p>\n
Before we get into the code, let’s add a Trunk.toml (in the folder with the Cargo.toml) with this configuration<\/p>\n
\r\n[serve]\r\naddress = "127.0.0.1"\r\nport = 8081\r\n<\/pre>\n
Let’s see what Yew generated. From the app folder (mine was named wasm_app) run <\/p>\n
\r\ntrunk serve --open\r\n<\/pre>\n
Straight up, Yew gives us a colourful starting point.<\/p>\n
In the code<\/strong><\/p>\n
Let’s go through the code, so we know what we need if we’re creating a project without the template, but also to see what’s been added.<\/p>\n
If you check out the Cargo.toml it’s filled in a lot of package info. for us, so you might wish to go tweak there, but we have a single dependency<\/p>\n
\r\n[dependencies]\r\nyew = { version="0.21", features=["csr"] }\r\n<\/pre>\n
The Yew template includes index.scss for our styles and Trunk automatically compiles\/transpiles to the .css file of the same name within the dist. <\/p>\n
The index.html is lovely and simple, really the only addition from a bare bones index.html is the including the SASS link which tells the compiler to compile using SASS<\/p>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n  <head>\r\n    <meta charset="utf-8" \/>\r\n    <title>Trunk Template<\/title>\r\n    <link data-trunk rel="sass" href="index.scss" \/>\r\n  <\/head>\r\n  <body><\/body>\r\n<\/html>\r\n<\/pre>\n
In the src folder we have two files, main.rs and app.rs, within main.rs we have<\/p>\n
\r\nmod app;\r\n\r\nuse app::App;\r\n\r\nfn main() {\r\n    yew::Renderer::<App>::new().render();\r\n}\r\n<\/pre>\n
Here we are basically telling Yew to render our App. Within the app.rs we have<\/p>\n
\r\nuse yew::prelude::*;\r\n\r\n#[function_component(App)]\r\npub fn app() -> Html {\r\n    html! {\r\n        <main>\r\n            <img class="logo" src="https:\/\/yew.rs\/img\/logo.svg" alt="Yew logo" \/>\r\n            <h1>{ "Hello World!" }<\/h1>\r\n            <span class="subtitle">{ "from Yew with " }<i class="heart" \/><\/span>\r\n        <\/main>\r\n    }\r\n}\r\n<\/pre>\n
Similar to Leptos, we have a macro for our HTML tags etc. but it’s html!<\/em> here (not view!<\/em>). Also the component is marked with the function_component<\/em> annotation, but otherwise it’s very recognisable what’s happening here.<\/p>\n
\r\nuse yew::prelude::*;\r\n\r\n#[function_component(App)]\r\npub fn app() -> Html {\r\n    html! {\r\n        <main>\r\n            <img class="logo" src="https:\/\/yew.rs\/img\/logo.svg" alt="Yew logo" \/>\r\n            <h1>{ "Hello World!" }<\/h1>\r\n            <span class="subtitle">{ "from Yew with " }<i class="heart" \/><\/span>\r\n        <\/main>\r\n    }\r\n}\r\n<\/pre>\n
Let’s add some routing<\/strong><\/p>\n
Create yourself a new file named counter.rs, let’s implement the fairly standard counter.rs component – I should say the Yew web site has an example of the counter page on their Getting Started, so we’ll just take that and make a few tweaks<\/p>\n
\r\nuse yew::prelude::*;\r\n\r\n#[function_component(Counter)]\r\npub fn counter() -> Html {\r\n    let counter = use_state(|| 0);\r\n    let on_add_click = {\r\n        let c = counter.clone();\r\n        move |_| { c.set(*c + 1); }\r\n    };\r\n\r\n    let on_subtract_click = {\r\n        let c = counter.clone();\r\n        move |_| { c.set(*c - 1); }\r\n    };\r\n\r\n    html! {\r\n        <div>\r\n            <button onclick={on_add_click}>{ "+1" }<\/button>\r\n            <p>{ *counter }<\/p>\r\n            <button onclick={on_subtract_click}>{ "-1" }<\/button>\r\n        <\/div>\r\n    }\r\n}\r\n<\/pre>\n
If you’ve used React, you’ll see this is very similar to the way we might write our React component. <\/p>\n
Ofcourse the syntax differs, but we have a use_state<\/em> and event handler functions etc. The main difference is the way we’re cloning the value – by convention all those c<\/em> variables would be named counter<\/em> as well, but I wanted to make it clear as to what the scope of the counter<\/em> variable was. <\/p>\n
On further reading – it appears the use_XXX syntax are hooks, see Pre-defined Hooks<\/a><\/em><\/p>\n
When we clone the counter, we’re not cloning the value, we’re cloning the handle (or type UseStateHandler which implements Clone). All clones point to the same reactive cell, so you are essentially changing the value in that handle.<\/p>\n
Before trying this code out we need our router, so the Yew site says add the following dependency to the Cargo.toml file<\/p>\n
\r\nyew-router = { git = "https:\/\/github.com\/yewstack\/yew.git" }\r\n<\/pre>\n
but I had version issues so instead used<\/p>\n
\r\nyew-router = { version = "0.18.0" }\r\n<\/pre>\n
Now let’s change the app.rs file to the following<\/p>\n
\r\nuse yew::prelude::*;\r\nuse yew_router::prelude::*;\r\nuse crate::counter::Counter;\r\n\r\n#[derive(Clone, Routable, PartialEq)]\r\nenum Route {\r\n    #[at("\/")]\r\n    Home,\r\n    #[at("\/counter")]\r\n    Counter,\r\n    #[not_found]\r\n    #[at("\/404")]\r\n    NotFound,\r\n}\r\n\r\nfn switch(routes: Route) -> Html {\r\n    match routes {\r\n        Route::Home => html! { <h1>{ "Home" }<\/h1> },\r\n        Route::Counter => { html! { <Counter \/> }},\r\n        Route::NotFound => html! { <h1>{ "404" }<\/h1> },\r\n    }\r\n}\r\n\r\n#[function_component(App)]\r\npub fn app() -> Html {\r\n    html! {\r\n        <BrowserRouter>\r\n            <Switch<Route> render={switch} \/>\r\n        <\/BrowserRouter>\r\n    }\r\n}\r\n<\/pre>\n
There’s a fair bit to digest, but hopefully it’s fairly obvious what’s happening thankfully. <\/p>\n
We create an enum of the routes with the at<\/em> annotation mapping to the URL path. Then we use a function (named switch<\/em> in this case) which maps the enum to the HTML. We’ve embedded HTML into the Home and NotFound routes but the Counter will render our Counter component as if it’s HTML.<\/p>\n
The final change is the app functions where we use the BrowserRouter and Switch along with our switch<\/em> function to render the pages.<\/p>\n
Code<\/strong><\/p>\n
Checkout the code on GitHub<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
In my previous post WASM with Rust (and Leptos) we covered creating a Rust project which generate a binary for use within WASM, using Leptos and using Trunk to build and run it. There’s more than one framework for creating WASM\/WebAssembly projects in Rust, let’s look at another one, this time Yew. We’ll be using […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[191,748],"tags":[],"class_list":["post-11696","post","type-post","status-publish","format-standard","hentry","category-rust","category-wasm"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/11696","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=11696"}],"version-history":[{"count":5,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/11696\/revisions"}],"predecessor-version":[{"id":11791,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/11696\/revisions\/11791"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=11696"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=11696"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=11696"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}