Bun + WebAssembly

🕸️ Bun + WebAssembly — Blazing-Fast Native Performance for the Web

WebAssembly (WASM) is revolutionizing the way we run high-performance code in the browser and on the server. When paired with Bun — the ultra-fast JavaScript runtime — WebAssembly gets even more powerful. Whether you're integrating Rust, C++, or AssemblyScript, Bun makes running WASM modules simple and lightning fast ⚡.

🧠 Why Use WebAssembly with Bun?

Bun is built for speed, and WebAssembly was designed for near-native performance. Together, they unlock new possibilities:

• 🚀 Execute compute-heavy logic written in Rust/C++ from JS
• 🔒 Safe sandboxed execution for plugins
• 🎮 Game engines, simulations, and audio processing
• 📦 Cross-platform modules that run identically everywhere

🧪 Loading a WASM Module in Bun

Let’s start with a simple WASM example in Bun. Imagine you’ve compiled a Rust function to WASM that adds two numbers.

// add.rs (Rust code)
#[no_mangle]
pub extern "C" fn add(a: i32, b: i32) -> i32 {
    a + b
}

Compile it using:

rustc --target=wasm32-unknown-unknown -O add.rs -o add.wasm

Now, let’s load and use this WASM module in Bun:

// bun-wasm.ts
const wasmBuffer = await Bun.file("add.wasm").arrayBuffer();
const wasmModule = await WebAssembly.instantiate(wasmBuffer);
const { add } = wasmModule.instance.exports;

console.log("5 + 3 =", add(5, 3)); // Outputs: 8

And just like that, you're running native Rust code from Bun — seamlessly 💡.

🔄 Bidirectional Communication: WASM ↔ JS

You can call JS from WASM or vice versa, enabling powerful extensions and runtime flexibility:

// JS function exposed to WASM
const imports = {
  env: {
    log_from_wasm: (val) => console.log("WASM says:", val)
  }
};

const wasm = await WebAssembly.instantiate(wasmBuffer, imports);
wasm.instance.exports.call_log(); // WASM calls back into JS

This setup is great for plugin systems or hybrid computation layers 🔗.

🧱 Real-World Use Cases of Bun + WebAssembly

• 📈 High-performance math operations and simulations
• 🔊 Audio manipulation and real-time effects
• 📚 PDF parsing, barcode scanning, or image processing
• 🎯 Crypto algorithms or compression libraries

📦 Running AssemblyScript in Bun

You can even write WebAssembly in a TypeScript-like syntax using AssemblyScript. Here's a quick setup:

// AssemblyScript (add.ts)
export function add(a: i32, b: i32): i32 {
  return a + b;
}

Compile with:

asc add.ts -b add.wasm

Then load in Bun the same way as before. Bun doesn't care how the WASM was created — it just runs it fast ⚡.

⚠️ Things to Watch Out For

While Bun handles WASM gracefully, here are a few caveats:

• 🗂️ WASM modules must be loaded as arrayBuffer() from Bun.file
• 🧠 Memory sharing between JS ↔ WASM can be tricky — be explicit with WebAssembly.Memory
• 🔐 Watch out for large WASM files and their async loading time

🔬 WASI and Bun: Future Potential

Bun doesn't yet have full support for WASI (WebAssembly System Interface), but with growing support in the ecosystem, we can expect Bun to allow even deeper native interactions — like file access, sockets, etc. 🚀

🚀 Conclusion

If you're building modern applications that demand native speed and portability, the combination of Bun + WebAssembly is hard to beat. Whether you're running Rust in the backend, optimizing game engines, or experimenting with browserless compute, Bun gives you an edge with its native WASM support and ultra-fast runtime.

Start small, dream big, and build blazing-fast applications with Bun + WASM! 🧩