search
menu
Dioxus 0.4.3ReferenceWeb
You are currently viewing the docs for Dioxus 0.4.3 which is no longer maintained.

Web

This guide will cover concepts specific to the Dioxus web renderer.

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 desktop exposes the use_eval hook that allows you to run raw Javascript in the webview:

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

fn main() {
    dioxus_desktop::launch(app);
}

fn app(cx: Scope) -> Element {
    // Use eval returns a function that can spawn eval instances
    let create_eval = use_eval(cx);

    // You can create as many eval instances as you want
    let mut eval = create_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);
        "#,
    )
    .unwrap();

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

    let future = use_future(cx, (), |_| {
        to_owned![eval];
        async move {
            // You can receive any message from JavaScript with the recv method
            eval.recv().await.unwrap()
        }
    });

    match future.value() {
        Some(v) => cx.render(rsx!(
            p { "{v}" }
        )),
        _ => cx.render(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.

PREVIOUSDesktop
NEXTSSR