{"id":11672,"date":"2025-08-23T09:44:10","date_gmt":"2025-08-23T09:44:10","guid":{"rendered":"https:\/\/putridparrot.com\/blog\/?p=11672"},"modified":"2025-08-23T09:44:10","modified_gmt":"2025-08-23T09:44:10","slug":"wasm-with-rust-and-leptos","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/wasm-with-rust-and-leptos\/","title":{"rendered":"WASM with Rust (and Leptos)"},"content":{"rendered":"

I’m going to be going through some of the steps from Leptos Getting Started<\/a>. Hopefully we’ll be able to add something here.<\/p>\n

Prerequisites<\/strong><\/p>\n

We’re going to use Trunk to run our application, so first off we need to make sure we’ve installed it<\/p>\n

\r\ncargo install trunk\r\n<\/pre>\n
Trunk allows us to build our code, run a server up and run our WASM application, moreover it’s watching for changes and so will rebuild and redeploy things as you go. Web style development with a compiled language. We’ll cover more on trunk later.<\/p>\n
Creating our project<\/strong><\/p>\n
Create yourself a folder for your application and run the terminal in that folder.<\/p>\n
We need to create our project – although I use RustRover from JetBrains, let’s go “old school” as use cargo to create our project etc. <\/p>\n
Run the following (obviously change wasm_app<\/em> to something more meaningful for your app name<\/p>\n
\r\ncargo new wasm_app --bin\r\n<\/pre>\n
cd into the application (as above, mine’s named wasm_app).<\/p>\n
\r\ncargo add leptos --features=csr\r\n<\/pre>\n
We’ll need to add the WASN target<\/p>\n
\r\nrustup target add wasm32-unknown-unknown\r\n<\/pre>\n
in the root folder (where your Cargo.toml file is) create an index.html with the following<\/p>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n  <head><\/head>\r\n  <body><\/body>\r\n<\/html>\r\n<\/pre>\n
Next create a cd into the src folder and edit the main.rs – it should look like the following<\/p>\n
\r\nuse leptos::prelude::*;\r\n\r\nfn main() {\r\n    leptos::mount::mount_to_body(|| view! { <p>"Hello, world!"<\/p> })\r\n}\r\n<\/pre>\n
The mount_to_body<\/em>, as the name suggests, essentially injects your WASM code into the <body><\/body> element.<\/p>\n
Now, from the root folder (i.e. where index.html is) run<\/p>\n
\r\ntrunk serve --open\r\n<\/pre>\n
If the default port (8080) is already in use we can specify the port using<\/p>\n
\r\ntrunk serve --open --port 8081\r\n<\/pre>\n
If all went well then you see your default browser showing the web page, if not then open a browser window and navigate to http:\/\/localhost:8081\/<\/p>\n
To save having to set the port via the CLI, you can also create a trunk.toml file in the root folder with something like this in it<\/p>\n
\r\n[serve]\r\naddress = "127.0.0.1"\r\nport = 8081\r\n<\/pre>\n
Taking it a bit further<\/strong><\/p>\n
We’ve got ourselves a really simple WASM page. <\/p>\n
Let’s move this a little further by creating a component for our application.<\/p>\n
Create a file in src named app.rs and we’ll add the following<\/p>\n
\r\nuse leptos::prelude::*;\r\n\r\n#[component]\r\npub fn App() -> impl IntoView {\r\n    view! {\r\n        <p>"Hello, world!"<\/p>\r\n    }\r\n}\r\n<\/pre>\n
and change the main.rs to this<\/p>\n
\r\nmod app;\r\n\r\nuse leptos::mount::mount_to_body;\r\nuse crate::app::App;\r\n\r\nfn main() {\r\n    mount_to_body(App);\r\n}\r\n<\/pre>\n
If you kept trunk running it will automatically rebuild the code and refresh the browser.<\/p>\n
Components<\/strong><\/p>\n
The component (below) returns HTML via the view macro and as you can see, this returns a trait IntoView. As you can see we mark the function as a #[component]<\/p>\n
\r\n#[component]\r\npub fn App() -> impl IntoView {\r\n    view! {\r\n        <p>"Hello, world!"<\/p>\r\n    }\r\n}\r\n<\/pre>\n
Note: you might want to change your text to prove to yourself that the did indeed get updated in the web page when you saved it – assuming trunk was running.<\/em><\/p>\n
This is a pretty simple starting point, so let’s add some more bits to this…<\/p>\n
Let’s change the App function to this<\/p>\n
\r\nuse leptos::prelude::*;\r\n \r\n#[component]\r\npub fn App() -> impl IntoView {\r\n    let (count, set_count) = signal(0);\r\n\r\n    view! {\r\n\r\n        <button on:click=move |_| set_count.set(count.get() + 1)>Up<\/button>\r\n        <div>{count}<\/div>\r\n        <button on:click=move |_| set_count.set(count.get() - 1)>Down<\/button>\r\n    }\r\n}\r\n<\/pre>\n
The signal (which is a reactive variable) may remind you of something like useState in React, we deconstruct the signal (which has the default of 0) into a count (getter) and a set_count (setter). To be honest the set and get functions seem odd if you’re using the properties such as C#, but that’s the way it is is Rust.<\/p>\n
The count value is of type ReadSignal and set_count is of type WriteSignal.<\/p>\n
We can also set the value of count using the following within the closure. Ultimately this should be a more performant way of doing things. The example above might be preferred for readability (although that’s debatable) – it does however look more inline with the way we get values etc. I’ll leave others to debate the pros and cons, for me the line below is effecient.<\/p>\n
\r\n*set_count.write() += 1\r\n<\/pre>\n
Routing<\/strong><\/p>\n
Let’s rename the app.rs file to counter.rs (also rename the function to Counter) and create a new app.rs file which will acts as the router to our components. We’ll need to add this to the Cargo.toml dependencies<\/p>\n
\r\nleptos_router = "0.8.5"\r\n<\/pre>\n
and in the app.rs paste the following code<\/p>\n
\r\nuse leptos::prelude::*;\r\nuse leptos_router::{\r\n    components::{Route, Router, Routes},\r\n    StaticSegment,\r\n};\r\nuse crate::counter::Counter;\r\nuse crate::home::Home;\r\n\r\n#[component]\r\npub fn App() -> impl IntoView {\r\n    view! {\r\n        <Router>\r\n            <Routes fallback=|| "Page not found.">\r\n                <Route path=StaticSegment("") view=Home \/>\r\n                <Route path=StaticSegment("counter") view=Counter \/>\r\n            <\/Routes>\r\n        <\/Router>\r\n    }\r\n}\r\n<\/pre>\n
You’ll need to add the mod to the main.rs file to include the home reference.<\/p>\n
I’ve also added a home.rs file with the following<\/p>\n
\r\nuse leptos::prelude::*;\r\n\r\n#[component]\r\npub fn Home() -> impl IntoView {\r\n    view! {\r\n        <p>Welcome to your new app!<\/p>\r\n    }\r\n}\r\n<\/pre>\n
As you can see, the router routes \/ to our Home component and the \/counter to our Counter component.<\/p>\n
Meta data from code<\/strong><\/p>\n
Whilst we have an index.html which you can edit, we might want to supply some of the meta data etc. via the app’s code. <\/p>\n
Add the following to Cargo.toml dependencies<\/p>\n
\r\nleptos_meta = "0.8.5"\r\n<\/pre>\n
Now in main.rs add<\/p>\n
\r\nuse leptos::view;\r\nuse leptos_meta::*;\r\n<\/pre>\n
and now change the code to <\/p>\n
\r\nfn main() {\r\n    mount_to_body(|| {\r\n        provide_meta_context();\r\n        view! { \r\n            <Title text="Welcome to My App" \/>\r\n            <Meta name="description" content="This is my app." \/>\r\n            <App \/>\r\n        }\r\n    });\r\n}<\/pre>\n
The provide_meta_context() function allows us to inject metadata such as <title>, <meta> and <script><\/p>\n
Code<\/strong><\/p>\n
Code for this post is available on GitHub<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
I’m going to be going through some of the steps from Leptos Getting Started. Hopefully we’ll be able to add something here. Prerequisites We’re going to use Trunk to run our application, so first off we need to make sure we’ve installed it cargo install trunk Trunk allows us to build our code, run a […]<\/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-11672","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\/11672","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=11672"}],"version-history":[{"count":5,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/11672\/revisions"}],"predecessor-version":[{"id":11695,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/11672\/revisions\/11695"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=11672"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=11672"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=11672"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}