Start a personal dev blog on your domain for free with Hashnode and grow your readership.
Get Started

Simple Rust + WASM example

  1. Install rust
    $ brew install rustup
    $ rustup-init
  2. Set default toolchain as nightly
    $ rustup default nightly
  3. Ass wasm target
    $ rustup target add wasm32-unknown-unknown
  4. Install wasm-gc tool to remove all unneeded exports, imports, functions, and so on from the generated WebAssembly module.
    $ cargo install wasm-gc
  5. Instal https to runs a web server, serving static files from the current directory
    $ cargo install https
  6. Create rust app, and open its files with your IDE (I'm using idea)
    $ cargo new --lib utils
    $ cd utils
    $ idea .
    7.Define the rust CDI lib type in the cargo.toml:
name = "utils"
version = "0.1.0"
authors = ["Hasan Yousef <>"]
edition = "2018"


crate-type =["cdylib"]
  1. Define the extern function:
    pub extern fn add_one(x: u32) -> u32 {
     x + 1
    The extern keyword is needed to create an interface, so that this function can be invoked from other languages. The no-mangle annotation to tell the Rust compiler not to mangle the name of this function.
  2. Build the wasm file:
    $ cargo build --target wasm32-unknown-unknown --release
  3. Run the wasm-gc to optimize the wasm file:
    $ wasm-gc target/wasm32-unknown-unknown/release/utils.wasm -o utils.gc.wasm
  4. Create the index.html file, and call the wasm module through javascript:
    <!DOCTYPE html>
        .then(wasmModule => {
          const result = wasmModeult.instance.exports.add_one(3);
          const text = document.createTextNode(result);
    Using instantiateStreaming instead, we can stream, compile, and instantiate a WebAssembly module in one go.
  5. Run the static file server:
    $ http
  6. Open your browser at: localhost:8000


If you want to interact with JavaScript function, you need to:

  1. Define these functions signature in the rust file
  2. Define a bridge/wrapper in the javascript file between these functions

So, if want to call the javascript alert and another function, let's say, addOne, then the above and index.html files will be as below:

// To call a JavaScript function
// 1. Define the JS functions signatures
extern {
    fn addOne(x: u32);
    fn alert(x: u32);
// 2. Call the JS function using unsafe block
pub extern fn add_one(x: u32) {
    unsafe {


<!DOCTYPE html>
  const addOne = (number) => {
    const text = document.createTextNode(number + 1);

  const importObject = {
    env: {
        addOne: addOne,
        alert: alert,

  WebAssembly.instantiateStreaming(fetch("utils.gc.wasm"), importObject)
  .then(wasmModule => {
       const result = wasmModule.instance.exports.add_one(5);

For using bindgen, kindly see my other post

Start a personal dev blog on your domain for free and grow your readership.

3.4K+ developers have started their personal blogs on Hashnode in the last one month.

Write in Markdown · Publish articles on custom domain · Gain readership on day zero · Automatic GitHub backup and more

Comments (1)