Web

Build single-page applications that run in the browser with Dioxus. 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
• ECommerce

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-bingen.
• Dioxus provides hydration to resume apps that are rendered on the server. See the hydration example for more details.

Tooling

To develop your Dioxus app for the web, you'll need a tool to build and serve your assets. We recommend using dioxus-cli which includes a build system, Wasm optimization, a dev server, and support hot reloading:

cargo install dioxus-cli

Make sure the wasm32-unknown-unknown target for rust is installed:

rustup target add wasm32-unknown-unknown

Creating a Project

Create a new crate:

cargo new --bin demo
cd demo

Add Dioxus and the web renderer as dependencies (this will edit your Cargo.toml):

cargo add dioxus
cargo add dioxus-web

Edit your main.rs:

#![allow(non_snake_case)]
// import the prelude to get access to the `rsx!` macro and the `Scope` and `Element` types
use dioxus::prelude::*;

fn main() {
    // launch the web app
    dioxus_web::launch(App);
}

// create a component that renders a div with the text "Hello, world!"
fn App(cx: Scope) -> Element {
    cx.render(rsx! {
        div {
            "Hello, world!"
        }
    })
}

And to serve our app:

dioxus serve