explaingit

wasm-bindgen/wasm-pack

7,166RustAudience · developerComplexity · 3/5Setup · moderate

TLDR

wasm-pack is a command-line tool that compiles Rust code to WebAssembly and packages it as an npm-compatible module, so you can call high-performance Rust from JavaScript without manual toolchain wrangling.

Mindmap

mindmap
  root((wasm-pack))
    What it does
      Compile Rust to WASM
      Generate JS bindings
      Package for npm
    Commands
      build
      test in browser
      pack and publish
      new project
    Outputs
      npm package
      WASM binary
      JS glue code
    Requirements
      Rust 1.30 plus
      npm or webpack
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Compile a Rust function into WebAssembly and import it in a JavaScript project as if it were a regular npm package.

USE CASE 2

Run your Rust and WebAssembly code in a real browser environment during testing to catch browser-specific bugs.

USE CASE 3

Publish your compiled Rust WebAssembly module to the npm registry so other JavaScript developers can install it.

USE CASE 4

Bootstrap a new Rust WebAssembly project from a template with wasm-pack new.

Tech stack

RustWebAssemblyJavaScriptnpmwebpack

Getting it running

Difficulty · moderate Time to first run · 30min

Requires Rust 1.30+ and the wasm-pack installer script, first build also downloads wasm-bindgen automatically.

In plain English

wasm-pack is a command-line tool that handles the workflow for compiling Rust code into WebAssembly and packaging the result for use in JavaScript projects. WebAssembly is a binary format that modern browsers and Node.js can run at near-native speed. It lets you write performance-critical code in a language like Rust and call it from JavaScript as if it were a regular package. Without wasm-pack, getting Rust output into a JavaScript project involves several steps and tools that need to be coordinated manually. wasm-pack bundles those steps into a small set of commands. The build command compiles a Rust crate into a WebAssembly binary and wraps it with the JavaScript glue code needed to call it from a browser or Node.js. The output is a package compatible with npm and bundlers like webpack, so it slots into existing JavaScript workflows without requiring a different toolchain. The new command generates a project from a template to help you get started quickly. The test command runs tests in a browser environment, which is useful when the code needs to behave correctly inside a web page. The pack and publish commands create a distributable tarball from your compiled package and optionally push it to the npm registry so others can install it. Logging is available through the standard RUST_LOG environment variable, which lets you adjust the verbosity of output during builds. The tool requires Rust version 1.30.0 or later. Installation is handled through the project's own installer script. The README is short and points to a dedicated documentation site for the quickstart guide, full command reference, and contribution instructions.

Copy-paste prompts

Prompt 1
I have a Rust function that does heavy computation and want to call it from my JavaScript app via WebAssembly. Walk me through using wasm-pack build to produce an npm package and import it in a simple HTML page.
Prompt 2
Show me how to write a test for my Rust WebAssembly module that runs inside a real browser using wasm-pack test.
Prompt 3
I built a Rust WebAssembly package with wasm-pack and want to publish it to npm. What do the wasm-pack pack and publish commands do and how do I run them?
Prompt 4
I'm new to Rust and WebAssembly. How do I use wasm-pack new to generate a starter project and what files does it create?
Open on GitHub → Explain another repo

← wasm-bindgen on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.