Integrating Rust‑Compiled WebAssembly into Frontend Projects: A Complete Guide

1. Introduction

High‑performance rendering challenges such as drawing millions of items on a canvas can be addressed by WebAssembly (Wasm), which runs binary code in the browser with near‑native speed.

2. What is Wasm?

2.1 Definition

Wasm is a new binary format designed for the web that provides faster execution than traditional JavaScript.

2.2 Advantages

Improve performance : Runs high‑intensity code close to native speed, ideal for heavy calculations and real‑time image processing.

Cross‑language support : Write code in C, C++, Rust, Go, etc., compile to .wasm , and run in the browser.

Complementary to JS : Wasm works alongside JavaScript, handling compute‑heavy tasks while JS manages UI interactions.

Optimized resource usage : Low memory footprint makes it suitable for mobile devices.

2.3 Using Wasm in the Frontend

Modern browsers support loading .wasm files directly. Write your code in Rust (or other supported languages), compile to Wasm, and import it from JavaScript.

3. Getting Started with Rust

3.1 Install Rust

curl https://sh.rustup.rs -sSf | sh

Verify installation:

rustc --version
cargo --version

3.2 Project Structure

Create a library project:

cargo new my_project --lib

The key files are lib.rs (source entry) and Cargo.toml (dependency management).

4. Compiling Rust to Wasm

Add wasm-bindgen to Cargo.toml :

[package]
name = "my_wasm_project"
version = "0.1.0"
edition = "2021"

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

[dependencies]
wasm-bindgen = "0.2"
web-sys = { version = "0.3", features = ["Window", "Document", "HtmlCanvasElement", "CanvasRenderingContext2d"] }

4.1 Example Code (draw a circle on a canvas)

use wasm_bindgen::prelude::*;
use web_sys::{window, Document, HtmlCanvasElement, CanvasRenderingContext2d};

#[wasm_bindgen]
pub fn draw_circle(canvas_id: &str) -> Result<(), JsValue> {
    let window = window().expect("no global `window` exists");
    let document = window.document().expect("window should have a document");
    let canvas = document.get_element_by_id(canvas_id)
        .and_then(|e| e.dyn_into::<HtmlCanvasElement>().ok())
        .expect("canvas element not found");
    canvas.set_width(500);
    canvas.set_height(500);
    let context = canvas
        .get_context("2d")?.unwrap().dyn_into::<CanvasRenderingContext2d>()?;
    context.begin_path();
    context.arc(250.0, 250.0, 100.0, 0.0, std::f64::consts::PI * 2.0)?;
    context.set_fill_style(&JsValue::from_str("blue"));
    context.fill();
    context.set_stroke_style(&JsValue::from_str("black"));
    context.stroke();
    Ok(())
}

This function obtains the canvas by ID, sets its size, draws a blue circle with a black outline, and returns Ok(()) .

4.2 Build the Wasm Package

wasm-pack build --target web

The command generates a pkg directory containing the compiled .wasm file and JavaScript glue code.

5. Integrating the Wasm Module into a Vue 3 Project

5.1 Create a Vue Project

npm init vite

Copy the my_wasm_project/pkg folder into the Vue project (e.g., under src/wasm ) and install it locally:

pnpm i ./my_wasm_project/pkg

5.2 Use the Wasm Functions

import init, { draw_circle } from 'my_wasm_project/my_wasm_project';

onMounted(async () => {
  await init();
  draw_circle('my_canvas');
});

Calling init() sets up the Wasm runtime before invoking draw_circle .

6. Summary

By installing Rust, creating a library project, adding wasm-bindgen and web-sys dependencies, writing canvas‑drawing code, compiling to WebAssembly, and importing the generated module into a Vue 3 application, developers can achieve high‑performance graphics in the browser while keeping the codebase in Rust.