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.
Ready-to-run agent install
This asset can be installed after the agent chooses its runtime, checks the plan, and runs the matching command.
npx -y tokrepo@latest install ce6e125e-3651-11f1-9bc6-00163e2b0d79 --target codexRun after dry-run confirms the install plan.
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
RedwoodJS — Full-Stack React Framework with GraphQL and Prisma
RedwoodJS is an opinionated full-stack JavaScript framework that combines React on the frontend with a GraphQL API and Prisma ORM on the backend, optimized for startups and rapid application development.
Blitz.js — The Full-Stack React Framework with Zero-API Data Layer
Blitz.js is a full-stack React framework built on Next.js that eliminates the need for a separate API layer by letting you import server code directly into your components.
Remix — Full-Stack Web Framework on Web Fundamentals
Remix is a full-stack React framework built on web fundamentals, focused on web standards, nested routing, progressive enhancement, and fast data loading. Now merged into React Router v7 but still widely used.
Blitz.js — Full-Stack React Framework with Zero-API Layer
Blitz.js is a full-stack React framework built on Next.js that eliminates the need for a REST or GraphQL API by letting you import server code directly into your React components.