search

Liveview

Liveview allows apps to run on the server and render in the browser. It uses WebSockets to communicate between the server and the browser.

Examples:

Support

Liveview is currently limited in capability when compared to the Web platform. Liveview apps run on the server in a native thread. This means that browser APIs are not available, so rendering WebGL, Canvas, etc is not as easy as the Web. However, native system APIs are accessible, so streaming, WebSockets, filesystem, etc are all viable APIs.

Setup

First, make sure you have Rust and Cargo installed, and then create a new project:

cargo new --bin demo
cd demo

Add the Dioxus crate with the Axum and liveview features:

cargo add dioxus@0.5.0-alpha.2 --features liveview,axum

Your dependencies should look roughly like this:

[dependencies]
dioxus = { version = "*", features = ["liveview", "axum"] }

Next, set up your app:

use dioxus::prelude::*;

fn main() {
    launch(app);
}

fn app() -> Element {
    rsx! { div { "Hello, world!" } }
}

Finnaly, run your app with:

dx serve --platform desktop
# or
cargo run

And that's it!

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.

Setup

Install dioxus-cli.

Usage

  1. Run:
dx serve --hot-reload --platform desktop
  1. Change some code within a rsx or render macro
  2. 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.