search
menu
Dioxus 0.6.0GuidesDesktop

Desktop

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

Apps built with Dioxus desktop use the system WebView to render the page. This makes the final size of application much smaller than other WebView renderers (typically under 5MB).

Although desktop apps are rendered in a WebView, your Rust code runs natively. 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 easily accessible though system APIs.

Dioxus desktop is built on top of wry, a Rust library for creating desktop applications with a WebView.

In the future, we plan to move to a custom web renderer-based DOM renderer with WGPU integrations (Blitz).

Examples

Tailwind App screenshot

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() {
    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" }
        },
    }
}

Custom Assets

You can link to local assets in dioxus desktop instead of using a url:

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

fn main() {
    launch(app);
}

fn app() -> Element {
    rsx! {
        div {
            img { src: asset!("/assets/static/scanner.png") } 
        }
    }
}

You can read more about assets in the assets reference.

Integrating with Wry

In cases where you need more low level control over your window, you can use wry APIs exposed through the Desktop Config and the use_window hook

PREVIOUSWeb
NEXTMobile