web-sys: DOM hello world - The `wasm-bindgen` Guide

## Keyboard shortcuts

Press `←` or `→` to navigate between chapters

Press `S` or `/` to search in the book

Press `?` to show this help

Press `Esc` to hide this help

# 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.

## `Cargo.toml`

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

    [package]
    authors = ["The wasm-bindgen Developers"]
    edition = "2021"
    name = "dom"
    publish = false
    version = "0.0.0"

    [lib]
    crate-type = ["cdylib"]

    [dependencies]
    wasm-bindgen = { path = "../../" }

    [dependencies.web-sys]
    features = ['Document', 'Element', 'HtmlElement', 'Node', 'Window']
    path = "../../crates/web-sys"

    [lints]
    workspace = true

## `src/lib.rs`

    #![allow(unused)]
    fn main() {
    use wasm_bindgen::prelude::*;

    // Called by our JS entry point to run the example
    #[wasm_bindgen(start)]
    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!"));

        body.append_child(&val)?;

        Ok(())
    }
    }