Rust to WASM: A Practical Guide to WebAssembly with Rust

A developer-focused guide to compiling Rust to WebAssembly, exposing safe JS bindings with wasm-bindgen, and integrating wasm modules into modern frontend toolchains for high-performance web apps.

Corrosion Expert Team

March 13, 2026·5 min read

Rust Chemistry

Rust to WASM Guide - Corrosion Expert — Photo by Sabrina Gelbart via Pexels

What is Rust to WASM and why it matters

Rust to wasm describes the practice of compiling Rust code into WebAssembly so it can run inside web browsers and other WASM-compatible runtimes. This approach gives near-native performance for compute-heavy tasks while preserving Rust's safety and strong type guarantees. In this guide, you'll see how to set up a Rust project for wasm, expose Rust functions to JavaScript via wasm-bindgen, and integrate the output into modern web toolchains. The goal is to unlock performance-sensitive modules without rewriting logic in JavaScript. The topic is commonly discussed in contemporary web tooling conversations and is an essential skill for Rust developers targeting the browser.

Rust

// lib.rs
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn greet(name: &str) -> String {
    format!("Hello, {}!", name)
}

Bash

# Build for web with wasm-pack
cargo install wasm-pack --force
wasm-pack build --target web

Setting up your Rust project for wasm

To compile Rust to wasm, you need the right toolchain and dependencies. Start with a stable Rust toolchain, install wasm-pack, and configure Cargo.toml for cdylib. The wasm-bindgen crate provides glue between Rust and JavaScript, handling memory and serialization. This section shows a minimal project layout and essential config to get started.

TOML

# Cargo.toml
[package]
name = "wasm_counter"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"

Rust

// src/lib.rs
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn add(a: i32, b: i32) -> i32 {
    a + b
}

Interoperability: calling wasm from JavaScript

After building, wasm-pack generates a JS wrapper you can import and call from JS. The wrapper handles memory and type conversion. Here is a simple example in plain JavaScript and a TypeScript variant to show how you typically load and call a function exported from Rust.

JavaScript

// import wrapper and initialize
import init, { add } from './pkg/wasm_counter.js';

async function main() {
  await init();
  console.log(add(2, 3)); // 5
}
main();

// TypeScript example
import init, { add } from './pkg/wasm_counter.js';

async function run(): Promise<void> {
  await init();
  const result: number = add(10, 20);
  console.log(result);
}
run();

Packaging for the web: bundlers and toolchains

To ship wasm modules in web apps, you typically pair Rust-generated wasm with a bundler like Vite or Webpack. wasm-pack can emit web-friendly bundles, and many toolchains add support for dynamic imports of wasm. This section shows a practical setup with a minimal package.json and a Vite config snippet to enable fast development.

JSON

// package.json (excerpt)
{
  "name": "wasm-demo",
  "scripts": {
    "build": "wasm-pack build --target web",
    "start": "vite"
  }
}

// vite.config.js (excerpt)
export default {
  build: {
    target: 'es2015',
  },
  optimizeDeps: {
    include: ['./pkg/wasm_counter.js']
  }
}

Performance and memory management

Rust-to-wasm performance depends on how you structure memory sharing and how you minimize data transfer between JS and wasm. wasm-bindgen helps by moving data efficiently and exposing simple entry points. This section demonstrates a straightforward example focused on string handling and basic numeric ops, plus tips for nudging hot paths to be faster.

Rust

#[wasm_bindgen]
pub fn greet(name: &str) -> String {
  format!("Hello, {}!", name)
}

JavaScript

import init, { greet } from './pkg/wasm_counter.js';

async function perf() {
  await init();
  console.time('call');
  console.log(greet('Alice'));
  console.timeEnd('call');
}
perf();

Debugging, testing, and troubleshooting

Rust-to-wasm projects benefit from wasm-bindgen-test and browser devtools. This section covers enabling wasm-bindgen-test, running tests, and common gotchas, like memory leaks, missing initialization, and bundler misconfigurations.

Bash

# Install wasm-bindgen-test runner
cargo install wasm-bindgen-test

TOML

# Cargo.toml test dependencies
[dev-dependencies]
wasm-bindgen-test = "0.3"

Bash

# Run tests for wasm
cargo test --target wasm32-unknown-unknown --no-default-features --features wasm-bindgen-test

Real-world patterns and pitfalls

In real projects, keep wasm modules small and focused, with thin wrappers to avoid frequent rebuilds. Prefer streaming data where possible and minimize crossing the boundary for large payloads. When integrating with a web app, lazy-load the wasm module and initialize it once per session to prevent repeated allocations. This section includes an additional example to illustrate best practices and common missteps, such as over-allocating memory or binding to bulky JS objects.

Rust

#[wasm_bindgen]
pub fn is_prime(n: u32) -> bool {
  if n < 2 { return false; }
  for i in 2..n {
    if n % i == 0 { return false; }
  }
  true
}

JavaScript

import init, { is_prime } from './pkg/wasm_counter.js';

async function check() {
  await init();
  console.log(is_prime(17)); // true
  console.log(is_prime(15)); // false
}
check();