Dioxus — Full-Stack App Framework for Web, Desktop, and Mobile
Dioxus is a full-stack app framework for Rust with a React-like API. Build web (WASM), desktop (native WebView), mobile (iOS/Android), TUI, and server-rendered apps from one codebase. Hooks, components, server functions, and hot reloading.
What it is
Dioxus is a full-stack application framework for Rust with a React-like API. You write components with hooks, props, and JSX-like syntax (RSX), and Dioxus compiles them to web (WASM), desktop (native WebView), mobile (iOS/Android), TUI, and server-rendered applications from a single codebase. It includes hot reloading, server functions, and a built-in router.
Dioxus targets Rust developers building cross-platform applications who want React's developer experience with Rust's performance and safety guarantees. It brings modern frontend patterns to the Rust ecosystem.
Why it saves time or tokens
Building for web, desktop, and mobile traditionally requires separate codebases in different languages. Dioxus lets you write once and deploy everywhere using Rust. The React-like API means developers familiar with React can transfer their knowledge. For AI assistants generating UI code, the familiar component pattern produces correct output even when the target language is Rust.
How to use
- Install the Dioxus CLI:
cargo install dioxus-cli - Create a new project:
dx new myapp - Run in development mode:
dx serve(web) ordx serve --platform desktop
Example
use dioxus::prelude::*;
fn app() -> Element {
let mut count = use_signal(|| 0);
rsx! {
div {
h1 { 'Counter: {count}' }
button {
onclick: move |_| count += 1,
'Increment'
}
}
}
}
fn main() {
dioxus::launch(app);
}
| Platform | Renderer |
|---|---|
| Web | WASM + WebView |
| Desktop | Native WebView |
| Mobile | iOS/Android WebView |
| TUI | Terminal UI |
| SSR | Server-side rendering |
Related on TokRepo
- AI tools for coding — programming frameworks on TokRepo
- AI tools for design — UI and design tools
Common pitfalls
- Dioxus is younger than React; some ecosystem libraries and patterns are still maturing
- WASM bundle sizes can be large without optimization; use wasm-opt and tree-shaking to reduce production bundle size
- Desktop and mobile renderers use WebView, not native widgets; performance and look-and-feel differ from truly native frameworks like SwiftUI or Kotlin
Frequently Asked Questions
Both are Rust web frameworks with reactive UIs. Dioxus uses a virtual DOM similar to React, while Leptos uses fine-grained reactivity similar to SolidJS. Dioxus supports more platforms (desktop, mobile, TUI). Leptos focuses on web performance. Choose Dioxus for cross-platform; Leptos for web-only with minimal overhead.
Yes. Dioxus supports SSR with hydration. The server renders the initial HTML, sends it to the client, and the client-side WASM takes over for interactivity. This provides fast initial page loads and SEO benefits while maintaining the React-like development experience.
Yes. Dioxus intentionally mirrors React's API with components, hooks (use_signal, use_effect), props, and event handlers. If you know React, the transition to Dioxus is primarily about learning Rust syntax rather than new UI paradigms.
Yes. The Dioxus CLI provides hot reloading for RSX templates and styles. When you change a component's RSX markup, the change appears immediately without a full rebuild. Rust code changes still require a recompile, but template changes are instant.
RSX is Dioxus's JSX-like syntax for declaring UI elements. It is a Rust macro that looks similar to HTML but with Rust expressions for dynamic values. RSX compiles to efficient Rust code at compile time, providing type safety and performance without runtime template parsing.
Citations (3)
- Dioxus GitHub— Dioxus is a full-stack Rust framework with React-like API
- Dioxus Docs— Dioxus supports web, desktop, mobile, and TUI
- WebAssembly— WebAssembly for running Rust in the browser
Related on TokRepo
Discussion
Related Assets
NAPI-RS — Build Node.js Native Addons in Rust
Write high-performance Node.js native modules in Rust with automatic TypeScript type generation and cross-platform prebuilt binaries.
Mamba — Fast Cross-Platform Package Manager
A drop-in conda replacement written in C++ that resolves environments in seconds instead of minutes.
Plasmo — The Browser Extension Framework
Build, test, and publish browser extensions for Chrome, Firefox, and Edge using React or Vue with hot-reload and automatic manifest generation.