web-sys: DOM hello world

View full source code or view the compiled example online

Using web-sys we're able to interact with all the standard web platform methods, including those of the DOM! Here we take a look at a simple "Hello, world!" which manufactures a DOM element in Rust, customizes it, and then appends it to the page.


You can see here how we depend on web-sys and activate associated features to enable all the various APIs:

name = "dom"
version = "0.1.0"
authors = ["The wasm-bindgen Developers"]
edition = "2018"
rust-version = "1.57"

crate-type = ["cdylib"]

wasm-bindgen = "0.2.92"

version = "0.3.4"
features = [


fn main() {
use wasm_bindgen::prelude::*;

// Called by our JS entry point to run the example
fn run() -> Result<(), JsValue> {
    // Use `web_sys`'s global `window` function to get a handle on the global
    // window object.
    let window = web_sys::window().expect("no global `window` exists");
    let document = window.document().expect("should have a document on window");
    let body = document.body().expect("document should have a body");

    // Manufacture the element we're gonna append
    let val = document.create_element("p")?;
    val.set_text_content(Some("Hello from Rust!"));