Rust Lesson 54 – WASM Project | Dataplexa

WebAssembly Project Using Rust

In this lesson, you will build a real WebAssembly (WASM) project using Rust and integrate it with a web application.

This lesson focuses on practical implementation so you understand how Rust + WASM works end-to-end.

Project Goal

We will create a Rust WebAssembly module that:

Performs calculations in Rust
Exports functions to JavaScript
Runs inside the browser using WASM

This type of setup is commonly used in production web applications.

Step 1: Create a New WASM Project

Create a new Rust WebAssembly project using wasm-pack.

wasm-pack new rust_wasm_calculator
cd rust_wasm_calculator

Step 2: Understand the Project Files

The key files in the project are:

src/lib.rs – Rust logic compiled to WASM
Cargo.toml – Dependencies and configuration
pkg/ – Generated WASM output

You will mainly work inside lib.rs.

Step 3: Write Rust Functions

Open src/lib.rs and add the following code.

use wasm_bindgen::prelude::*;

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

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

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

Each function is exposed to JavaScript using #[wasm_bindgen].

Step 4: Build the WASM Package

Compile the Rust code into WebAssembly.

wasm-pack build --target web

This command generates the pkg directory containing the WASM binary.

Step 5: Create a Simple HTML File

Create an index.html file to load the WASM module.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Rust WASM Calculator</title>
</head>
<body>

<h2>Rust WASM Calculator</h2>

<script type="module">
import init, { add, subtract, multiply } from "./pkg/rust_wasm_calculator.js";

await init();

console.log(add(10, 5));
console.log(subtract(10, 5));
console.log(multiply(10, 5));
</script>

</body>
</html>

Step 6: Run the Project

Serve the files using a local server:

python -m http.server

Open the browser and check the console to see results.

How This Works

The browser loads:

The JavaScript bindings
The compiled WebAssembly module
Rust functions running inside WASM

JavaScript calls Rust functions just like normal JS functions.

Real-World Applications

Rust WASM projects are used for:

High-performance web apps
Games and simulations
Cryptographic operations
Data processing in browsers

📝 Practice Exercises

Exercise 1

Add a division function to the Rust code.

Exercise 2

Modify the HTML file to display results on the page.

Exercise 3

Experiment with passing different values from JavaScript.

✅ Practice Answers

Answer 1

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

Answer 2

Use DOM elements and update text content using JavaScript.

Answer 3

Change input values and observe results in the browser console.

What’s Next?

In the next lesson, you will learn about Networking in Rust and how Rust applications communicate over the network.

← Previous Rust Index Next ➜