How to Use Rust with WebAssembly

WebAssembly (WASM) lets you run compiled code in the browser at near-native speeds, and Rust is one of the best languages for writing WebAssembly modules. If you want to build high-performance web apps with Rust and WebAssembly, you’re in the right place.

This guide will show you how to:

Set up Rust for WebAssembly development
Compile Rust code to WebAssembly
Use Rust-generated WebAssembly in a JavaScript project
Optimize and debug your WebAssembly code

Why Use Rust for WebAssembly?

Rust is a fantastic choice for WebAssembly because:

Performance – Rust compiles to highly optimized machine code.
Memory Safety – Rust prevents memory leaks and buffer overflows.
No Garbage Collector – Unlike JavaScript, Rust does not rely on a garbage collector, making it faster.
Great Tooling – Rust has first-class support for WebAssembly via wasm-bindgen and wasm-pack.

Setting Up Rust for WebAssembly

First, install Rust if you haven’t already:

1
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

Next, install the WebAssembly target for Rust:

1
rustup target add wasm32-unknown-unknown

Then, install the WebAssembly toolchain:

1
cargo install wasm-pack

Writing Rust Code for WebAssembly

Create a new Rust library:

1
2
cargo new --lib rust-wasm-demo
cd rust-wasm-demo

Edit Cargo.toml to include wasm-bindgen, which helps Rust and JavaScript interact:

1
2
[dependencies]
wasm-bindgen = "0.2"

Now, write a simple Rust function that WebAssembly will expose:

1
2
3
4
5
6
7
use wasm_bindgen::prelude::*;

// Export this function to JavaScript
#[wasm_bindgen]
pub fn greet(name: &str) -> String {
    format!("Hello, {}!", name)
}

Compiling Rust to WebAssembly

Run the following command to compile your Rust code into WebAssembly:

1
wasm-pack build --target web

This generates a pkg/ directory containing:

*.wasm – The compiled WebAssembly file
*.js – JavaScript bindings for easier interaction

Using WebAssembly in JavaScript

To use the WebAssembly module in a web project, create an index.html and index.js file.

Install WebAssembly Module

If you’re using npm, install your Rust package:

1
2
npm init -y
npm install --save ./pkg

Import and Use WebAssembly in JavaScript

In index.js:

1
2
3
4
5
6
7
8
import init, { greet } from './pkg/rust_wasm_demo.js';

async function run() {
    await init();
    console.log(greet("Rustacean"));
}

run();

Create an HTML Page

In index.html:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Rust with WebAssembly</title>
</head>
<body>
    <script type="module" src="index.js"></script>
</body>
</html>

Run a local web server and open the page in your browser:

1
npx http-server .

Optimizing WebAssembly Performance

To optimize your WebAssembly module, use wasm-opt:

1
2
cargo install wasm-opt
wasm-opt -Oz -o optimized.wasm pkg/rust_wasm_demo_bg.wasm

This reduces the file size and improves performance.

Debugging WebAssembly

For debugging:

Use console.log to print WebAssembly output in JavaScript.
Use Chrome DevTools to inspect WebAssembly memory.
Use wasm-opt -g to keep debugging symbols.

Key Ideas

Key Idea	Summary
Rust + WebAssembly	Rust is one of the best languages for WebAssembly.
Setting Up	Install `rustup`, `wasm-pack`, and add the `wasm32-unknown-unknown` target.
Compiling Rust to WASM	Use `wasm-pack build --target web` to generate WebAssembly modules.
Using in JavaScript	Import the module and call Rust functions from JavaScript.
Optimizations	Use `wasm-opt` to reduce size and improve speed.
Debugging	Use DevTools and `console.log` for debugging WebAssembly.

Now go ahead and start writing blazing-fast web apps with Rust and WebAssembly!

Rust with WebAssembly In the Browser

Trans-Pile Rust To run in in the browser!