Hi, I’m Heorhii, and in this guide, we’ll explore Aleo-Wasm, a WebAssembly (Wasm) binding for Aleo that allows developers to build ZK Apps. This library simplifies the process of compiling Rust to WebAssembly and integrating it into JavaScript environments for running Aleo programs directly in browsers and Node.js.

This guide will walk you through setting up Aleo-Wasm, building different Wasm modules, and executing Aleo programs efficiently.

Why Aleo-Wasm? Developers building ZK Apps often face challenges when bridging Rust and JavaScript. Aleo-Wasm, using wasm-bindgen, streamlines this process by generating bindings that allow Rust-based Aleo logic to be executed in a browser or Node.js.

Key features include:

• Aleo Account Management. Handle accounts and cryptographic operations

• Smart contract execution. Deploy and interact with Aleo programs

• Token transfers. Send Aleo credits directly in a web app

• WebAssembly speed. Improve performance for blockchain computations

This approach enables faster and more efficient execution of ZK Apps on the web.

https://developer.aleo.org/guides/sdk/wasm/installation

1. Setting up Aleo-Wasm.

• Installing wasm-pack. Before building WebAssembly modules, install wasm-pack:

curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh

• Compiling Rust to WebAssembly. Use wasm-pack to compile Rust into WebAssembly modules for different environments. The general syntax for building is:

wasm-pack build --target <target> --out-dir <out-dir> -- --features <crate-features>

Depending on where you want to run Aleo programs, you’ll need to compile for Node.js, single-threaded browsers, or multi-threaded browsers.

2. Building Aleo-Wasm Modules:

1. Node.js Module. The Node.js module supports Aleo account and record management but does not yet allow program execution due to Aleo protocol limitations.

wasm-pack build --release --target nodejs -- --features "serial" --no-default-features

2. Single-Threaded Browser Module. For browser-based applications, compile the Wasm module like this:

wasm-pack build --release --target web

For maximum memory allocation (4GB), use:

RUSTFLAGS='-C link-arg=--max-memory=4294967296' wasm-pack build --release --target web

3. Multi-Threaded Browser Module. To improve performance, use Rust-native threading via web-workers. First, enable Rust nightly and required flags:

export RUSTFLAGS='-C target-feature=+atomics,+bulk-memory,+mutable-globals -C link-arg=--max-memory=4294967296'
rustup run nightly wasm-pack build --release --target web --out-dir pkg-parallel -- --features "parallel, browser" --no-default-features -Z build-std=panic_abort,std

More info you can find here:

https://developer.aleo.org/guides/sdk/wasm/browser_multi_thread

3. Testing Aleo-Wasm. To ensure everything is working, run tests in different environments:

• Node.js

wasm-pack test --node

• Browser

wasm-pack test --firefox
wasm-pack test --chrome
wasm-pack test --safari

4. Using Aleo-Wasm in Web Apps:

• Initializing the WebAssembly Module. After building the Wasm package, import it into your JavaScript project:

import * as aleo from "./pkg/aleo_wasm";

• Managing Aleo Accounts

let account = new aleo.Account();
console.log("Aleo Account:", account);

• Running an Aleo Program

async function executeAleoProgram() {
    let program = new aleo.Program("my_program.aleo");
    let result = await program.execute("some_function", ["param1", "param2"]);
    console.log("Execution Result:", result);
}

Conclusion. Aleo-Wasm makes it easier to integrate Aleo programs into JavaScript applications using WebAssembly. Whether you're building a wallet, a dApp, or a ZK App, this tool provides a seamless bridge between Rust and the web.

By leveraging multi-threading, WebAssembly, and Rust’s performance, developers can create efficient, privacy-preserving apps on Aleo.

For further details, explore the Provable SDK or Aleo Developer Hub.

https://developer.aleo.org/concepts/fundamentals/accounts

Happy coding!

To know more about Aleo, join now!

• Aleo Twitter

• Aleo Discord

• Aleo Website

• List of Aleo and Leo code and resourses

Prepared by Colliseum

Hi, I’m Heorhii, and in this guide, we’ll explore Aleo-Wasm, a WebAssembly (Wasm) binding for Aleo that allows developers to build ZK Apps. This library simplifies the process of compiling Rust to WebAssembly and integrating it into JavaScript environments for running Aleo programs directly in browsers and Node.js.

This guide will walk you through setting up Aleo-Wasm, building different Wasm modules, and executing Aleo programs efficiently.

Why Aleo-Wasm? Developers building ZK Apps often face challenges when bridging Rust and JavaScript. Aleo-Wasm, using wasm-bindgen, streamlines this process by generating bindings that allow Rust-based Aleo logic to be executed in a browser or Node.js.

Key features include:

• Aleo Account Management. Handle accounts and cryptographic operations

• Smart contract execution. Deploy and interact with Aleo programs

• Token transfers. Send Aleo credits directly in a web app

• WebAssembly speed. Improve performance for blockchain computations

This approach enables faster and more efficient execution of ZK Apps on the web.

https://developer.aleo.org/guides/sdk/wasm/installation

1. Setting up Aleo-Wasm.

• Installing wasm-pack. Before building WebAssembly modules, install wasm-pack:

curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh

• Compiling Rust to WebAssembly. Use wasm-pack to compile Rust into WebAssembly modules for different environments. The general syntax for building is:

wasm-pack build --target <target> --out-dir <out-dir> -- --features <crate-features>

Depending on where you want to run Aleo programs, you’ll need to compile for Node.js, single-threaded browsers, or multi-threaded browsers.

2. Building Aleo-Wasm Modules:

1. Node.js Module. The Node.js module supports Aleo account and record management but does not yet allow program execution due to Aleo protocol limitations.

wasm-pack build --release --target nodejs -- --features "serial" --no-default-features

2. Single-Threaded Browser Module. For browser-based applications, compile the Wasm module like this:

wasm-pack build --release --target web

For maximum memory allocation (4GB), use:

RUSTFLAGS='-C link-arg=--max-memory=4294967296' wasm-pack build --release --target web

3. Multi-Threaded Browser Module. To improve performance, use Rust-native threading via web-workers. First, enable Rust nightly and required flags:

export RUSTFLAGS='-C target-feature=+atomics,+bulk-memory,+mutable-globals -C link-arg=--max-memory=4294967296'
rustup run nightly wasm-pack build --release --target web --out-dir pkg-parallel -- --features "parallel, browser" --no-default-features -Z build-std=panic_abort,std

More info you can find here:

https://developer.aleo.org/guides/sdk/wasm/browser_multi_thread

3. Testing Aleo-Wasm. To ensure everything is working, run tests in different environments:

• Node.js

wasm-pack test --node

• Browser

wasm-pack test --firefox
wasm-pack test --chrome
wasm-pack test --safari

4. Using Aleo-Wasm in Web Apps:

• Initializing the WebAssembly Module. After building the Wasm package, import it into your JavaScript project:

import * as aleo from "./pkg/aleo_wasm";

• Managing Aleo Accounts

let account = new aleo.Account();
console.log("Aleo Account:", account);

• Running an Aleo Program

async function executeAleoProgram() {
    let program = new aleo.Program("my_program.aleo");
    let result = await program.execute("some_function", ["param1", "param2"]);
    console.log("Execution Result:", result);
}

Conclusion. Aleo-Wasm makes it easier to integrate Aleo programs into JavaScript applications using WebAssembly. Whether you're building a wallet, a dApp, or a ZK App, this tool provides a seamless bridge between Rust and the web.

By leveraging multi-threading, WebAssembly, and Rust’s performance, developers can create efficient, privacy-preserving apps on Aleo.

For further details, explore the Provable SDK or Aleo Developer Hub.

https://developer.aleo.org/concepts/fundamentals/accounts

Happy coding!

To know more about Aleo, join now!

• Aleo Twitter

• Aleo Discord

• Aleo Website

• List of Aleo and Leo code and resourses

Prepared by Colliseum