Introduction to WebAssembly (WASM) with Rust

In this lesson, you will learn about WebAssembly (WASM) and how Rust can be compiled to run inside web browsers.

WebAssembly allows Rust code to execute at near-native speed on the web, opening new possibilities for high-performance web applications.

What Is WebAssembly?

WebAssembly (WASM) is a low-level binary instruction format designed to run code efficiently in web browsers.

Unlike JavaScript, WebAssembly is compiled ahead of time and executed in a sandboxed environment, making it both fast and secure.

Why Use WASM?

WebAssembly was created to solve performance limitations of JavaScript. It allows languages like Rust, C, and C++ to run in the browser.

Benefits of WASM include:

• Near-native performance
• Safe memory execution
• Language independence
• Seamless integration with JavaScript

Why Rust Is Ideal for WASM

Rust is one of the best languages for WebAssembly because:

• It has no garbage collector
• It produces small, efficient binaries
• It enforces memory safety
• It has excellent tooling support

Many modern web applications use Rust + WASM for performance-critical logic.

Common Use Cases for Rust + WASM

• High-performance web applications
• Games and graphics engines
• Data visualization
• Image and video processing
• Cryptography and security tools

Installing WASM Tooling

To work with WebAssembly in Rust, install the required tools:

rustup target add wasm32-unknown-unknown
cargo install wasm-pack

Creating a New WASM Project

Use wasm-pack to create a new Rust WASM project.

wasm-pack new rust_wasm_project
cd rust_wasm_project

Understanding the Project Structure

A Rust WASM project includes:

• src/lib.rs – Core Rust code
• Cargo.toml – Dependencies and build config
• pkg/ – Generated WASM output

The library file is compiled into WebAssembly.

Writing a Simple WASM Function

Below is a basic Rust function exposed to JavaScript.

use wasm_bindgen::prelude::*;

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

The #[wasm_bindgen] attribute exposes Rust functions to JavaScript.

Building the WASM Package

Compile the project to WebAssembly using:

wasm-pack build --target web

This generates the WASM binary and JavaScript bindings.

Using WASM in the Browser

You can import the generated WASM module into JavaScript:

import init, { add } from "./pkg/rust_wasm_project.js";

await init();
console.log(add(2, 3));

This allows Rust code to run directly in the browser.

Limitations of WebAssembly

While powerful, WASM has some limitations:

• No direct DOM access (uses JavaScript bindings)
• Debugging can be harder
• Binary size considerations

📝 Practice Exercises

Exercise 1

Create a Rust WASM function that multiplies two numbers.

Exercise 2

Build the WASM project and inspect the generated files.

Exercise 3

Call the Rust function from JavaScript.

✅ Practice Answers

Answer 1

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

Answer 2

Use wasm-pack build and check the pkg directory.

Answer 3

Import the function and call it from JavaScript.

What’s Next?

In the next lesson, you will build a real WebAssembly project using Rust, integrating WASM into a complete web application.