Skip to main content

​
Introduction to Dioxus

Dioxus is a cross-platform UI framework for Rust that enables you to build beautiful, fast, and type-safe applications with a single codebase. Whether you’re targeting web browsers, desktop platforms, mobile devices, or even native GPU-rendered interfaces, Dioxus provides a unified development experience.

​
What is Dioxus?

Dioxus is a framework for building user interfaces in Rust, inspired by React but designed to leverage Rust’s unique strengths. It uses a declarative, component-based approach where you describe your UI as functions that return Elements, and Dioxus efficiently handles updating the actual interface when your state changes. 
use dioxus::prelude::*;

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!" }
    }
}

​
Key Features

Dioxus offers a unique combination of features that make it stand out in the UI framework landscape:

Cross-Platform

Write once, deploy everywhere. Build for web, desktop (Windows, macOS, Linux), mobile (iOS, Android), and more from a single codebase.

Instant Hot-Reload

See your changes in milliseconds with RSX hot-reloading for markup and styles. Experimental hot-patching for Rust code updates in real-time.

Ergonomic State Management

Signals-based reactivity combines the best of React, Solid, and Svelte. Simple, performant, and type-safe.

Full-Stack Ready

Built-in integration with Axum for server functions, SSR, hydration, WebSockets, and more. No separate backend needed.

Zero-Config Setup

Start building immediately with dx serve. Integrated bundler handles optimization, compression, and asset processing.

Type-Safe Everything

Leverage Rust’s type system for compile-time guarantees. Catch errors before runtime with type-safe routing, props, and server functions.

​
How Dioxus Works

​
Component-Based Architecture

Dioxus applications are built by composing functions that return UI elements. Each component can:
  • Accept props for configuration
  • Maintain internal state using signals
  • Respond to events like clicks or input changes
  • Render child components to build complex UIs
#[component]
fn Header(title: String, color: String) -> Element {
    rsx! {
        div {
            background_color: "{color}",
            h1 { "{title}" }
        }
    }
}

​
RSX: Rust Syntax Extension

Dioxus uses the rsx! macro to provide a JSX-like syntax for declaring UI. It’s type-safe, ergonomic, and compiles directly to Rust code: 
rsx! {
    div { class: "container",
        h1 { "Welcome to Dioxus" }
        for i in 0..5 {
            p { "Item {i}" }
        }
    }
}

​
Reactive State with Signals

Signals provide fine-grained reactivity. When a signal changes, only the components that depend on it re-render: 
let mut count = use_signal(|| 0);
let doubled = use_memo(move || count() * 2);

use_effect(move || {
    println!("Count changed to {count}");
});

​
Supported Platforms

  • Render directly to the DOM using WebAssembly
  • Pre-render with SSR and rehydrate on the client
  • Simple “hello world” at about 50kb, comparable to React
  • Built-in dev server and hot reloading for quick iteration

​
Comparison to Other Frameworks

​
Dioxus vs React

  • Component-based architecture with props and state
  • Hooks for managing state and side effects
  • Virtual DOM for efficient updates
  • JSX-like syntax (RSX in Dioxus)
  • Language: Dioxus uses Rust instead of JavaScript/TypeScript
  • Type Safety: Compile-time guarantees vs runtime checks
  • Performance: Native compilation and fine-grained reactivity
  • Cross-Platform: Single codebase for web, desktop, and mobile
  • Bundle Size: Smaller WASM bundles (~50kb for hello world)

​
Dioxus vs Tauri

  • Both enable desktop apps with Rust
  • Both use webview for rendering (by default)
  • Both offer native system access
  • UI Framework: Dioxus provides the full UI framework; Tauri requires separate web framework
  • Web Support: Dioxus apps run natively on the web; Tauri is desktop-focused
  • Mobile: Dioxus includes first-class mobile support
  • Server Functions: Built-in fullstack capabilities in Dioxus

​
Dioxus vs Leptos

  • Both are Rust frameworks for web and more
  • Both use signals for reactive state management
  • Both offer SSR and hydration
  • Both compile to WebAssembly
  • Mobile & Desktop: Dioxus has more mature desktop/mobile support
  • Developer Experience: Dioxus CLI provides integrated tooling
  • Hot Reload: Dioxus offers subsecond hot-reload and experimental hot-patching
  • Community: Different ecosystems and component libraries

​
Who Should Use Dioxus?

Dioxus is perfect for:
1

Rust Developers

If you’re already familiar with Rust and want to build UIs without leaving the ecosystem
2

Cross-Platform Teams

Teams that need to target multiple platforms (web, desktop, mobile) with a single codebase
3

Performance-Critical Apps

Applications where bundle size, startup time, and runtime performance matter
4

Type Safety Enthusiasts

Developers who value compile-time guarantees and want to catch bugs early

​
Philosophy and Design Goals

Dioxus is built around several core principles:
Developer Experience First: Hot-reload, helpful error messages, comprehensive documentation, and intuitive APIs make development productive and enjoyable.
Performance Without Compromise: Fine-grained reactivity, efficient diffing, and native compilation deliver fast apps without manual optimization.
Batteries Included: Routing, state management, server functions, asset handling, and bundling come built-in. No decision fatigue.
Progressive Enhancement: Start simple with client-side rendering, add SSR when needed, integrate server functions incrementally.

​
Next Steps

Ready to start building with Dioxus? Here’s what to do next:

Installation

Set up Rust, install the Dioxus CLI, and configure your development environment

Quick Start

Build your first Dioxus app in minutes with our step-by-step tutorial
Join the Dioxus Discord community to get help, share your projects, and connect with other developers!

Build docs developers (and LLMs) love

Get started for freeTalk to us