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-bindgen.
• Dioxus provides hydration to resume apps that are rendered on the server. See the fullstack getting started guide for more information.

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:

dx serve

If you open the browser and navigate to 127.0.0.1 you should see an app that looks like this:

Hot Reload

1. Hot reloading allows much faster iteration times inside of rsx calls by interpreting them and streaming the edits.
2. It is useful when changing the styling/layout of a program, but will not help with changing the logic of a program.

For the web renderer, you can use the dioxus cli to serve your application with hot reloading enabled.

Setup

Install dioxus-cli.

Usage

1. Run:

dx serve --hot-reload

1. Change some code within a rsx or render macro
2. Open your localhost in a browser
3. Save and watch the style change without recompiling

Limitations

1. The interpreter can only use expressions that existed on the last full recompile. If you introduce a new variable or expression to the rsx call, it will require a full recompile to capture the expression.
2. Components, Iterators, and some attributes can contain arbitrary rust code and will trigger a full recompile when changed.