Desktop overview

Build a standalone native desktop app that looks and feels the same across operating systems.

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 off Tauri. Right now there are limited Dioxus abstractions over the menubar, event handling, etc. In some places you may need to leverage Tauri directly – through Wry and Tao.

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

Examples

• File Explorer
• WiFi Scanner

Here's a query for the main repo to find examples which use dioxus_desktop (might not be 100% acurrate).

Getting started

Platform-specific dependencies

Dioxus desktop renders through a WebView. Depending on your platform, you might need to install some dependencies.

Windows

Windows apps depend on WebView2 – a library that should be installed in all modern Windows distributions. If you have Edge installed, then Dioxus will work fine. If you don't have WebView2, then you can install it through Microsoft. MS provides 3 options:

1. A tiny "evergreen" bootstrapper that fetches an installer from Microsoft's CDN.
2. A tiny installer that fetches WebView2 from Microsoft's CDN.
3. A statically linked version of WebView2 in your final binary for offline users.

For development purposes, use Option 1.

Linux

WebView Linux apps require WebkitGtk. When distributing, this can be part of your dependency tree in your .rpm or .deb. However, likely, your users will already have WebkitGtk.

sudo apt install libwebkit2gtk-4.1-dev libgtk-3-dev libayatana-appindicator3-dev

When using Debian/bullseye libappindicator3-dev is no longer available but replaced by libayatana-appindicator3-dev.

# on Debian/bullseye use:
sudo apt install libwebkit2gtk-4.1-dev libgtk-3-dev libayatana-appindicator3-dev

If you run into issues, make sure you have all the basics installed, as outlined in the Tauri docs.

MacOS

Currently – everything for macOS is built right in! However, you might run into an issue if you're using nightly Rust due to some permissions issues in our Tao dependency (which have been resolved but not published).

Creating a Project

Create a new crate:

cargo new --bin demo
cd demo

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

cargo add dioxus
cargo add dioxus-desktop

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 dioxus app in a webview
    dioxus_desktop::launch(App);
}

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

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.