search
menu
Dioxus 0.6.0GuidesWeb

Web

To run on the Web, your app must be compiled to WebAssembly and depend on the dioxus and dioxus-web crates.

A build of Dioxus for the web will be roughly equivalent to the size of a React build (70kb vs 65kb) but it will load significantly faster because WebAssembly can be compiled as it is streamed.

Examples:

TodoMVC example

Note: Because of the limitations of Wasm, not every crate will work with your web apps, so you'll need to make sure that your crates work without native system calls (timers, IO, etc).

Support

The Web is the best-supported target platform for Dioxus.

  • Because your app will be compiled to WASM you have access to browser APIs through wasm-bindgen.
  • Dioxus provides hydration to resume apps that are rendered on the server. See the fullstack reference for more information.

Running Javascript

Dioxus provides some ergonomic wrappers over the browser API, but in some cases you may need to access parts of the browser API Dioxus does not expose.

For these cases, Dioxus web exposes the use_eval hook that allows you to run raw Javascript in the webview:

src/eval.rs
use dioxus::prelude::*;

fn main() {
    launch(app);
}

fn app() -> Element {
    let future = use_resource(move || async move {
        // You can create as many eval instances as you want
        let mut eval = document::eval(
            r#"
            // You can send messages from JavaScript to Rust with the dioxus.send function
            dioxus.send("Hi from JS!");
            // You can receive messages from Rust to JavaScript with the dioxus.recv function
            let msg = await dioxus.recv();
            console.log(msg);
            "#,
        );

        // You can send messages to JavaScript with the send method
        eval.send("Hi from Rust!").unwrap();

        // You can receive any message from JavaScript with the recv method
        eval.recv::<String>().await.unwrap()
    });

    match future.read_unchecked().as_ref() {
        Some(v) => rsx! {
            p { "{v}" }
        },
        _ => rsx! {
            p { "hello" }
        },
    }
}

If you are targeting web, but don't plan on targeting any other Dioxus renderer you can also use the generated wrappers in the web-sys and gloo crates.

Customizing Index Template

Dioxus supports providing custom index.html templates. The index.html must include a div with the id main to be used. Hot Reload is still supported. An examplePWA-Example.

PREVIOUSAssets
NEXTDesktop