dioxus Documentation

File: README.md Copy Chapter

Build for web, desktop, and mobile, and more with a single codebase. Zero-config setup, integrated hot-reloading, and signals-based state management. Add backend functionality with Server Functions and bundle with our CLI.

fn app() -> Element {
    let mut count = use_signal(|| 0);

    rsx! {
        h1 { "High-Five counter: {count}" }
        button { onclick: move |_| count += 1, "Up high!" }
        button { onclick: move |_| count -= 1, "Down low!" }
    }
}

⭐️ Unique features: Copy Chapter

• Cross-platform apps in three lines of code (web, desktop, mobile, server, and more)
• Ergonomic state management combines the best of React, Solid, and Svelte
• Built-in featureful, type-safe, fullstack web framework
• Integrated bundler for deploying to the web, macOS, Linux, and Windows
• Subsecond Rust hot-patching and asset hot-reloading
• And more! Take a tour of Dioxus.

Instant hot-reloading Copy Chapter

With one command, dx serve and your app is running. Edit your markup, styles, and see changes in milliseconds. Use our experimental dx serve --hotpatch to update Rust code in real time.

Build Beautiful Apps Copy Chapter

Dioxus apps are styled with HTML and CSS. Use the built-in TailwindCSS support or load your favorite CSS library. Easily call into native code (objective-c, JNI, Web-Sys) for a perfect native touch.

Truly fullstack applications Copy Chapter

Dioxus deeply integrates with axum to provide powerful fullstack capabilities for both clients and servers. Pick from a wide array of built-in batteries like WebSockets, SSE, Streaming, File Upload/Download, Server-Side-Rendering, Forms, Middleware, and Hot-Reload, or go fully custom and integrate your existing axum backend.

Experimental Native Renderer Copy Chapter

Render using web-sys, webview, server-side-rendering, liveview, or even with our experimental WGPU-based renderer. Embed Dioxus in Bevy, WGPU, or even run on embedded Linux!

First-party primitive components Copy Chapter

Get started quickly with a complete set of primitives modeled after shadcn/ui and Radix-Primitives.

First-class Android and iOS support Copy Chapter

Dioxus is the fastest way to build native mobile apps with Rust. Simply run dx serve --platform android and your app is running in an emulator or on device in seconds. Call directly into JNI and Native APIs.

Bundle for web, desktop, and mobile Copy Chapter

Simply run dx bundle and your app will be built and bundled with maximization optimizations. On the web, take advantage of .avif generation, .wasm compression, minification, and more. Build WebApps weighing less than 50kb and desktop/mobile apps less than 5mb.

Fantastic documentation Copy Chapter

We've put a ton of effort into building clean, readable, and comprehensive documentation. All html elements and listeners are documented with MDN docs, and our Docs runs continuous integration with Dioxus itself to ensure that the docs are always up to date. Check out the Dioxus website for guides, references, recipes, and more. Fun fact: we use the Dioxus website as a testbed for new Dioxus features - check it out!

Community Copy Chapter

Dioxus is a community-driven project, with a very active Discord and GitHub community. We're always looking for help, and we're happy to answer questions and help you get started. Our SDK is community-run and we even have a GitHub organization for the best Dioxus crates that receive free upgrades and support.

Full-time core team Copy Chapter

Dioxus has grown from a side project to a small team of fulltime engineers. Thanks to the generous support of FutureWei, Satellite.im, the GitHub Accelerator program, we're able to work on Dioxus full-time. Our long term goal is for Dioxus to become self-sustaining by providing paid high-quality enterprise tools. If your company is interested in adopting Dioxus and would like to work with us, please reach out!

Supported Platforms Copy Chapter

Running the examples Copy Chapter

The examples in the main branch of this repository target the git version of dioxus and the CLI. If you are looking for examples that work with the latest stable release of dioxus, check out the 0.6 branch.

The examples in the top level of this repository can be run with:

cargo run --example <example>

However, we encourage you to download the dioxus-cli to test out features like hot-reloading. To install the most recent binary CLI, you can use cargo binstall.

curl -fsSL https://dioxuslabs.com/install.sh | bash

If this CLI is out-of-date, you can install it directly from git or cargo-binstall

cargo install --git https://github.com/DioxusLabs/dioxus dioxus-cli --locked

With the CLI, you can also run examples with the web platform. You will need to disable the default desktop feature and enable the web feature with this command:

dx serve --example <example> --platform web -- --no-default-features

Contributing Copy Chapter

• Check out the website section on contributing.
• Report issues on our issue tracker.
• Join the discord and ask questions!

License Copy Chapter

This project is licensed under either the MIT license or the Apache-2 License.

Unless you explicitly state otherwise, any contribution intentionally submitted
for inclusion in Dioxus by you, shall be licensed as MIT or Apache-2, without any additional
terms or conditions.

File: examples/10-integrations/tailwind/README.md Copy Chapter

Example: Basic Tailwind usage

This example shows how an app might be styled with TailwindCSS.

Running Copy Chapter

Our Tailwind guide explains how to setup and run Dioxus-Tailwind projects.

Note that in Dioxus 0.7, the Tailwind watcher is initialized automatically if a tailwind.css file is find in your app's root.

File: examples/10-integrations/pwa/README.md Copy Chapter

Dioxus PWA example

This is a basic example of a progressive web app (PWA) using Dioxus and Dioxus CLI.
Currently PWA functionality requires the use of a service worker and manifest file, so this isn't 100% Rust yet.

It is also very much usable as a template for your projects, if you're aiming to create a PWA.

Try the example Copy Chapter

Make sure you have Dioxus CLI installed (if you're unsure, run cargo install dioxus-cli --locked).

You can run dx serve in this directory to start the web server locally, or run
dx build --release to build the project so you can deploy it on a separate web-server.

Project Structure Copy Chapter

├── Cargo.toml
├── Dioxus.toml
├── index.html // Custom HTML is needed for this, to load the SW and manifest.
├── LICENSE
├── public
│   ├── favicon.ico
│   ├── logo_192.png
│   ├── logo_512.png
│   ├── manifest.json // The manifest file - edit this as you need to.
│   └── sw.js // The service worker - you must edit this for actual projects.
├── README.md
└── src
    └── main.rs

Resources Copy Chapter

If you're just getting started with PWAs, here are some useful resources:

• PWABuilder docs
• MDN article on PWAs

For service worker scripting (in JavaScript):

• Service worker guide from PWABuilder
• Service worker examples, also from PWABuilder

If you want to stay as close to 100% Rust as possible, you can try using wasi-worker to replace the JS service worker file. The JSON manifest will still be required though.

File: examples/01-app-demos/bluetooth-scanner/README.md Copy Chapter

Bluetooth scanner app

This desktop app showcases the use of background threads.

File: examples/01-app-demos/ecommerce-site/README.md Copy Chapter

Dioxus Example: An e-commerce site using the FakeStoreAPI

This example app is a fullstack web application leveraging the FakeStoreAPI and Tailwind CSS.

Development

1. Run the following commands to serve the application:

dx serve

Note that in Dioxus 0.7, the Tailwind watcher is initialized automatically if a tailwind.css file is find in your app's root.

Status

This is a work in progress. The following features are currently implemented:

• A homepage with a list of products dynamically fetched from the FakeStoreAPI (rendered using SSR)
• A product detail page with details about a product (rendered using LiveView)
• A cart page
• A checkout page
• A login page

File: examples/01-app-demos/file-explorer/README.md Copy Chapter

File-explorer with Rust and Dioxus

This example shows how a Dioxus App can directly leverage system calls and libraries to bridge native functionality with the WebView renderer.

To run this example: Copy Chapter

dx serve

File: examples/01-app-demos/geolocation-native-plugin/README.md Copy Chapter

Geolocation demo

A minimal Dioxus application that implements a native plugin.

The plugin demonstrated here makes it possible to access the user's geolocation. It does a few things:

• Inspect and request location permissions using the native Android/iOS dialogs.
• Configure one-shot position requests (high-accuracy toggle + maximum cached age).
• Inspect the last reported coordinates, accuracy, altitude, heading, and speed.

The example shares the same metadata pipeline as any plugin crate: the native Gradle/Swift
artifacts are embedded via linker symbols and bundled automatically by dx.

Running the example Copy Chapter

# Inside the repository root
dx serve --project examples/01-app-demos/geolocation --platform mobile

For Android/iOS you’ll need the respective toolchains installed (Android SDK/NDK, Xcode) so the
geolocation crate’s build.rs can build the native modules. The UI also works on desktop/web,
but location calls will return an error because the plugin only supports mobile targets—those
errors are shown inline in the demo.

Things to try Copy Chapter

1. Tap Check permissions to see the current OS state (granted/denied/prompt).
2. Tap Request permissions to trigger the native dialog from within the app.
3. Toggle High accuracy and set a Max cached age before requesting the current position.
4. Observe the coordinate grid update whenever a new reading arrives, or the error banner if the
   operation fails (e.g., permissions denied or running on an unsupported platform).

File: examples/01-app-demos/hotdog/README.md Copy Chapter

Hot diggity dog!

A Dioxus demo app for the new tutorial!

To run Copy Chapter

Make sure you cd to this directory (dioxus/hotdog) and then serve any platform:

dx serve --platform web
dx serve --platform desktop
dx serve --platform ios
dx serve --platform android

File: packages/web/README.md Copy Chapter

Dioxus-web

Website |
Guides |
API Docs |
Chat

Overview Copy Chapter

Run Dioxus in the browser using WebAssembly.

• Relies on sledgehammer-bindgen and web-sys to modify the dom
• Supports instant hot reloading via the Dioxus CLI
• Around 60k gzipped

Contributing Copy Chapter

• Report issues on our issue tracker.
• Join the discord and ask questions!

License Copy Chapter

This project is licensed under the MIT license.

Unless you explicitly state otherwise, any contribution intentionally submitted
for inclusion in Dioxus by you shall be licensed as MIT without any additional
terms or conditions.