docs.rs docs

Make writing web applications using Rust WebAssembly easy

I wanted a library that someone could learn in an afternoon how to use and start making interactive browser experiences with. This project doesn’t support every browser function under the sun. Though you can easily add your own using the runtime Javascript invoking mechanism used by this library. Feel free to submit a PR for more functionality.

Check out the documentation here

cargo add web

Hello World

Let’s just look at a basic example of how to put things in the console:

use web::*;

fn main() {
    console_log("Hello, world!");
        <meta charset="utf-8">
        <script src="https://unpkg.com/js-wasm/js-wasm.js"></script>
        <script type="application/wasm" src="helloworld.wasm"></script>
        Open my console.

Remember to configure your library Cargo.toml for WebAssembly

# add these lines for WebAssembly to end of your Cargo.toml

crate-type =["cdylib"]

lto = true
cargo build --target wasm32-unknown-unknown --release
cp target/wasm32-unknown-unknown/release/helloworld.wasm .
python3 -m http.server

# open http://localhost:8000 in browser
# right click, inspect, look at message in console

Full example is here.

Something more advanced?

Let’s look at our snake example and some of it’s key feature usages:

Screen Shot 2022-12-21 at 12 35 48 PM

Play demo here


This example uses canvas

//get an element and get the 2D context for canvas
let screen = query_selector("#screen");
let width: f64 = get_property_f64(&screen, "width");
let height: f64 = get_property_f64(&screen, "height");
let ctx = CanvasContext::from_element(&screen);


//clear screen
    self.canvas_width as f64,
    self.canvas_height as f64,

// iterate through all the cells of the screen and draw a rectangle
for (_id, (pos, color)) in &mut self.world.query::<(&Position, &Color)>() {
        (pos.0 * (self.canvas_width / MAP_WIDTH)) as f64,
        (pos.1 * (self.canvas_height / MAP_HEIGHT)) as f64,
        (self.canvas_width / MAP_WIDTH) as f64,
        (self.canvas_height / MAP_HEIGHT) as f64,

request animation frame

Let’s see how to run the game loop

fn game_loop() {
    // run game loop assuming 15 ms has passed
    match Game::instance().run(15.0) {
        Err(e) => console_error(&e.to_string()),
        _ => (),
    // request next animation frame


// start the loop


let body = query_selector("body");
element_add_key_down_listener(&body, |e| {
    Game::instance().key_down(e.key_code as u32);

Async & Coroutines

This library has support for async and spawning coroutines. Consider this program that starts a looping console log and also draws random squares on a screen.

use web::*;

// easily make your first function async
async fn main() {
    let canvas = query_selector("#canvas");
    let ctx = CanvasContext::from_element(&canvas);

    // we can spawn concurrent operations
    coroutine(async {
        loop {
            console_log("⏰ tik");
            // hand async set_timeout
            console_log("⏰ tok");

    loop {
        // draw a random color rect
            "rgb({}, {}, {})",
            random() * 255.0,
            random() * 255.0,
            random() * 255.0
            random() * 500.0,
            random() * 500.0,
            random() * 500.0,
            random() * 500.0,
        // a more async way to write graphics code


This project is licensed under either of

at your option.


Unless you explicitly state otherwise, any contribution intentionally submitted for inclusion in web by you, as defined in the Apache-2.0 license, shall be dual licensed as above, without any additional terms or conditions.