Top Related Projects
CLI and Rust libraries for low-level manipulation of WebAssembly modules
🚀 The leading Wasm Runtime supporting WASIX, WASI and Emscripten
A fast and secure runtime for WebAssembly
Emscripten: An LLVM-to-WebAssembly Compiler
A TypeScript-like language for WebAssembly.
Optimizer and compiler/toolchain library for WebAssembly
Quick Overview
wasm-pack is a tool for building and working with Rust-generated WebAssembly (Wasm) projects. It simplifies the process of compiling Rust code to Wasm and creating npm packages for JavaScript developers to consume. wasm-pack serves as a bridge between Rust and JavaScript ecosystems, making it easier to integrate Rust's performance benefits into web applications.
Pros
- Streamlines the process of compiling Rust to WebAssembly
- Automates npm package generation for easy integration with JavaScript projects
- Provides a unified workflow for testing, building, and publishing Wasm modules
- Supports multiple target environments (web, Node.js, no-modules)
Cons
- Learning curve for developers new to Rust or WebAssembly
- Limited to Rust as the source language for WebAssembly compilation
- Dependency on external tools and ecosystem (e.g., Rust, Cargo, npm)
- May require additional configuration for complex projects or specific use cases
Code Examples
- Creating a new wasm-pack project:
cargo new --lib my-wasm-project
cd my-wasm-project
- Adding wasm-bindgen dependency to Cargo.toml:
[lib]
crate-type = ["cdylib", "rlib"]
[dependencies]
wasm-bindgen = "0.2.84"
- Writing a simple Rust function exposed to JavaScript:
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
pub fn add(a: i32, b: i32) -> i32 {
a + b
}
- Building and packaging the Wasm module:
wasm-pack build --target web
Getting Started
-
Install Rust and wasm-pack:
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh cargo install wasm-pack
-
Create a new Rust library project:
cargo new --lib my-wasm-project cd my-wasm-project
-
Add wasm-bindgen to Cargo.toml and write your Rust code (see examples above).
-
Build and package your Wasm module:
wasm-pack build --target web
-
Use the generated JavaScript module in your web project:
import init, { add } from './pkg/my_wasm_project.js'; async function run() { await init(); console.log(add(2, 3)); // Output: 5 } run();
Competitor Comparisons
CLI and Rust libraries for low-level manipulation of WebAssembly modules
Pros of wasm-tools
- Broader scope: Provides a comprehensive suite of tools for WebAssembly, including parsing, validation, and transformation
- Language-agnostic: Works with WebAssembly modules regardless of the source language
- More actively maintained: Regular updates and contributions from the Bytecode Alliance community
Cons of wasm-tools
- Steeper learning curve: Requires more in-depth knowledge of WebAssembly internals
- Less focused on Rust-specific workflows: May require additional setup for Rust projects
- Command-line oriented: Lacks some of the user-friendly features of wasm-pack
Code comparison
wasm-pack:
wasm-pack build
wasm-pack test
wasm-pack publish
wasm-tools:
wasm-tools validate module.wasm
wasm-tools print module.wasm
wasm-tools transform module.wasm --output transformed.wasm
wasm-pack is primarily designed for Rust developers working with WebAssembly, offering a streamlined workflow for building, testing, and publishing Rust-generated WebAssembly modules. It provides a higher-level abstraction and integrates well with the Rust ecosystem.
wasm-tools, on the other hand, offers a more versatile set of low-level tools for working with WebAssembly modules, regardless of their origin. It's better suited for advanced WebAssembly manipulation and analysis but may require more setup for specific language workflows.
🚀 The leading Wasm Runtime supporting WASIX, WASI and Emscripten
Pros of Wasmer
- Broader language support: Wasmer can run WebAssembly modules compiled from various languages, not just Rust
- Runtime flexibility: Offers multiple runtime options (JIT, native, LLVM) for different performance needs
- Standalone runtime: Can be used as a standalone WebAssembly runtime, not tied to web browsers
Cons of Wasmer
- Steeper learning curve: More complex to set up and use compared to wasm-pack's streamlined workflow
- Less web-focused: Not specifically optimized for web-based WebAssembly usage like wasm-pack
- Larger footprint: Generally requires more resources due to its broader feature set
Code Comparison
wasm-pack:
wasm_bindgen_test_configure!(run_in_browser);
#[wasm_bindgen_test]
fn pass() {
assert_eq!(1 + 1, 2);
}
Wasmer:
use wasmer::{Store, Module, Instance};
let module = Module::from_file(&store, "path/to/module.wasm")?;
let instance = Instance::new(&module, &imports)?;
let result = instance.exports.get_function("sum")?.call(&[1.into(), 2.into()])?;
The code snippets demonstrate the different focus areas: wasm-pack is geared towards testing Rust-generated WebAssembly in browsers, while Wasmer provides a more general-purpose WebAssembly runtime environment.
A fast and secure runtime for WebAssembly
Pros of Wasmtime
- Broader scope: Wasmtime is a general-purpose WebAssembly runtime, supporting various languages and use cases
- Performance: Optimized for speed and efficiency, making it suitable for production environments
- Standalone execution: Can run WebAssembly modules directly without a browser
Cons of Wasmtime
- Steeper learning curve: Requires more in-depth knowledge of WebAssembly concepts
- Less focused on Rust integration: While it supports Rust, it's not specifically tailored for Rust-to-WebAssembly workflows
Code Comparison
Wasm-pack (Rust to WebAssembly):
#[wasm_bindgen]
pub fn add(a: i32, b: i32) -> i32 {
a + b
}
Wasmtime (Running WebAssembly):
let engine = Engine::default();
let module = Module::from_file(&engine, "add.wasm")?;
let instance = Instance::new(&mut store, &module, &[])?;
let add = instance.get_func(&mut store, "add")?;
let result = add.call(&mut store, &[Val::I32(1), Val::I32(2)])?;
This comparison highlights the different focus areas of the two projects. Wasm-pack simplifies the process of compiling Rust to WebAssembly, while Wasmtime provides a runtime environment for executing WebAssembly modules from various sources.
Emscripten: An LLVM-to-WebAssembly Compiler
Pros of Emscripten
- Supports multiple languages (C, C++, and others) for WebAssembly compilation
- Provides a more complete runtime environment, including system libraries
- Has a longer history and wider adoption in the WebAssembly ecosystem
Cons of Emscripten
- Larger output size due to included runtime and libraries
- Steeper learning curve, especially for developers not familiar with C/C++
- Can be slower to compile compared to Rust-based alternatives
Code Comparison
Emscripten (C++):
#include <emscripten.h>
#include <iostream>
EMSCRIPTEN_KEEPALIVE
extern "C" int add(int a, int b) {
return a + b;
}
wasm-pack (Rust):
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
pub fn add(a: i32, b: i32) -> i32 {
a + b
}
Both examples show a simple addition function exposed to JavaScript. Emscripten requires explicit use of EMSCRIPTEN_KEEPALIVE
and extern "C"
, while wasm-pack uses the #[wasm_bindgen]
attribute for similar functionality.
A TypeScript-like language for WebAssembly.
Pros of AssemblyScript
- Easier learning curve for JavaScript developers
- Supports a subset of TypeScript syntax
- Smaller runtime footprint compared to Rust-generated WebAssembly
Cons of AssemblyScript
- Less mature ecosystem and tooling compared to Rust
- Limited access to low-level system features
- Potentially lower performance in certain scenarios
Code Comparison
AssemblyScript:
export function add(a: i32, b: i32): i32 {
return a + b;
}
wasm-pack (Rust):
#[no_mangle]
pub extern "C" fn add(a: i32, b: i32) -> i32 {
a + b
}
Summary
AssemblyScript offers a more familiar syntax for JavaScript developers and a smaller runtime footprint, making it easier to adopt for web developers. However, wasm-pack with Rust provides a more mature ecosystem, better performance in certain scenarios, and access to low-level system features. The choice between the two depends on the project requirements, developer expertise, and performance needs.
Optimizer and compiler/toolchain library for WebAssembly
Pros of binaryen
- More versatile: Can be used for various WebAssembly-related tasks beyond just packaging
- Supports multiple input languages: Can work with C, C++, and other languages that compile to WebAssembly
- Provides optimization tools: Includes a suite of WebAssembly optimization passes
Cons of binaryen
- Steeper learning curve: Requires more in-depth knowledge of WebAssembly internals
- Less Rust-specific: Doesn't provide tailored support for Rust-to-WebAssembly workflows
- Manual configuration: Often requires more manual setup and configuration
Code Comparison
binaryen (C++ example):
#include <binaryen-c.h>
BinaryenModuleRef module = BinaryenModuleCreate();
BinaryenType params[] = {BinaryenTypeInt32(), BinaryenTypeInt32()};
BinaryenFunctionTypeRef functionType = BinaryenAddFunctionType(module, "adder", BinaryenTypeInt32(), params, 2);
wasm-pack (Rust example):
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
pub fn add(a: i32, b: i32) -> i32 {
a + b
}
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
ð¦â¨ wasm-pack
Your favorite Rust â Wasm workflow tool!
Docs | Contributing | Chat
Built with ð¦ð¸ by The Rust and WebAssembly Working Group
About
This tool seeks to be a one-stop shop for building and working with rust-
generated WebAssembly that you would like to interop with JavaScript, in the
browser or with Node.js. wasm-pack
helps you build rust-generated
WebAssembly packages that you could publish to the npm registry, or otherwise use
alongside any javascript packages in workflows that you already use, such as webpack.
This project is a part of the rust-wasm group. You can find more info by visiting that repo!
ð® Prerequisites
This project requires Rust 1.30.0 or later.
â¡ Quickstart Guide
Visit the quickstart guide in our documentation.
ðï¸ Commands
new
: Generate a new RustWasm project using a templatebuild
: Generate an npm wasm pkg from a rustwasm cratetest
: Run browser testspack
andpublish
: Create a tarball of your rustwasm pkg and/or publish to a registry
ð Logging
wasm-pack
uses env_logger
to produce logs when wasm-pack
runs.
To configure your log level, use the RUST_LOG
environment variable. For example:
RUST_LOG=info wasm-pack build
ð¯ Contributing
Read our guide on getting up and running for developing wasm-pack
, and
check out our contribution policy.
ð¤¹ââï¸ Governance
This project is part of the rustwasm Working Group.
This project was started by ashleygwilliams and is maintained by drager and the Rust Wasm Working Group Core Team.
Top Related Projects
CLI and Rust libraries for low-level manipulation of WebAssembly modules
🚀 The leading Wasm Runtime supporting WASIX, WASI and Emscripten
A fast and secure runtime for WebAssembly
Emscripten: An LLVM-to-WebAssembly Compiler
A TypeScript-like language for WebAssembly.
Optimizer and compiler/toolchain library for WebAssembly
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot