wasm-bindgen

wasm-bindgen is the foundational toolchain for making Rust and WebAssembly interoperate with JavaScript. Rather than requiring developers to hand-write low-level glue code that shuttles values across the Wasm/JS boundary, its #[wasm_bindgen] procedural macro annotates Rust functions, structs, and enums, and its companion CLI post-processes the compiled .wasm binary to emit matching JS/TypeScript bindings - exporting Rust APIs to JS and importing JS/Web APIs into Rust with full type fidelity for strings, closures, structs, and JS objects.

The project is a monorepo housing the whole ecosystem: the wasm-bindgen crate and macro, the wasm-bindgen-cli binary that generates bindings, wasm-bindgen-futures for bridging JS Promises with Rust async/await, and the js-sys/web-sys crates that expose typed bindings for JavaScript’s standard globals and the full Web API surface respectively. Together these are the substrate that nearly every Rust-to-Wasm web project (frameworks like Yew and Leptos included) builds on.

What You Get

• The #[wasm_bindgen] procedural macro for exporting Rust functions/structs to JS and importing JS/Web APIs into Rust
• wasm-bindgen-cli, a post-processing tool that rewrites the compiled .wasm binary and emits matching JS/TypeScript glue files
• wasm-bindgen-futures for converting between JS Promises and Rust Futures, enabling async/await across the boundary
• js-sys, providing raw bindings to JavaScript’s standard built-in objects (Array, Object, Promise, etc.)
• web-sys, providing generated bindings to the full Web API surface (DOM, fetch, WebSockets, canvas, and hundreds more)

Common Use Cases

• Shipping performance-critical Rust code (image processing, physics, parsers) into a web app as a WebAssembly module callable from JavaScript
• Building Rust-based frontend frameworks (Yew, Leptos, Dioxus) that need to manipulate the DOM and call Web APIs directly from Rust
• Wrapping an existing JS library or browser API so idiomatic, typed Rust code can call it without hand-written FFI shims
• Bridging async JavaScript code (fetch, timers, Promise-based APIs) with Rust’s async/await via wasm-bindgen-futures

Under The Hood

Architecture - The repo is a Cargo workspace of tightly coupled crates: crates/macro and crates/macro-support implement the #[wasm_bindgen] attribute macro that annotates Rust items with metadata; src/describe.rs and src/convert in the core wasm-bindgen crate define how Rust types serialize across the ABI boundary; crates/cli-support and crates/cli implement the binary that parses the compiled .wasm module’s custom sections (written by the macro) and emits the final JS/TypeScript glue files. js-sys and web-sys are separately generated crates (from WebIDL definitions, see crates/webidl) that layer typed, ergonomic Rust bindings for JS globals and Web APIs on top of the same low-level wasm-bindgen runtime primitives (src/closure.rs, src/externref.rs). Tech Stack - Pure Rust (94.9% of the codebase) targeting the wasm32-unknown-unknown and related Wasm targets, with a small JS/TS runtime shim generated per-project; uses cfg-if, once_cell, optional serde/serde_json for the core crate, and a justfile/CI matrix that runs tests across headless browsers, Node, Deno, and no-std targets. Code Quality - The tests/ directory is unusually extensive, with dedicated suites for tests/wasm (browser-run integration tests), tests/headless (headless-browser CI), tests/worker, tests/no-std, and tests/wasm32-emscripten, reflecting the project’s need to validate behavior across many Wasm execution environments; 548 contributors and continuous CI (main.yml) indicate mature review and regression-testing discipline. API Design - The #[wasm_bindgen] macro keeps the common case declarative (annotate a function or struct and it’s exposed to JS with matching types), while js-sys/web-sys mirror JS/Web API naming closely enough that developers already familiar with the DOM or JS standard library can transfer that knowledge directly into Rust.