Dioxus 0.5+ Knowledge Patch
Claude's baseline knowledge covers Dioxus through 0.4.x. This skill provides features from 0.5 (2024) onwards.
Quick Reference
Component Syntax (0.5+)
| Old (0.4) | New (0.5+) |
|---|---|
fn App(cx: Scope) -> Element | fn App() -> Element |
cx.use_hook() | use_signal(), use_memo() |
use_state, use_ref | Signal<T> (always Copy) |
| Per-platform launchers | dioxus::launch(App) |
Signals
| Operation | Syntax | ||
|---|---|---|---|
| Create | `let count = use_signal(\ | \ | 0);` |
| Read (subscribes) | count.read() or count() | ||
| Read (no subscribe) | count.peek() | ||
| Write | count.write(), count.set(5), count += 1 | ||
| Global | `static THEME: GlobalSignal<T> = GlobalSignal::new(\ | \ | ...)` |
| Mapped | `user.map(\ | u\ | &u.name)` |
See references/signals-hooks.md for hooks, effects, resources, coroutines.
RSX Syntax
| Pattern | Example |
|---|---|
| Conditional | if show {Header {}} |
| Conditional attr | class: if active {"active"} |
| List with key | for item in items {li {key: "{item.id}",...}} |
| Children prop | fn Card(children: Element) -> Element |
| Optional prop | #[props(default)] disabled: bool |
| Prop into | #[props(into)] id: String |
See references/rsx-patterns.md for attributes, events, prop spreading.
Assets (0.6+)
const LOGO: Asset = asset!("/assets/logo.png");
const HERO: Asset = asset!(
"/hero.png",
ImageAssetOptions::new()
.format(ImageFormat::Avif)
.preload(true)
);
const STYLES: Asset = asset!("/app.css", CssAssetOptions::new().minify(true));Server Functions (0.7+)
| Feature | Syntax |
|---|---|
| Basic | #[server] async fn get_data() -> Result<T> |
| Route params | #[get("/api/users/{id}")] async fn get_user(id: u32) |
| Query params | #[get("/search?query")] async fn search(query: String) |
| Middleware | #[server] #[middleware(AuthLayer)] |
| Extractors | async fn auth(headers: HeaderMap, cookies: Cookies) |
See references/fullstack.md for WebSocket, SSR, streaming, server config.
Router
#[derive(Routable, Clone, PartialEq)]
enum Route {
#[route("/")]
Home {},
#[route("/user/:id")]
User { id: u32 },
#[route("/files/:..path")] // Catch-all
Files { path: Vec<String> },
}See references/router.md for layouts, navigation, nested routes.
CLI Commands
| Command | Purpose |
|---|---|
dx serve | Dev server with hot-reload |
dx serve --platform ios | iOS simulator |
dx build --release | Production build |
dx bundle | Package for distribution |
dx serve --wasm-split | Route-based code splitting |
See references/cli-desktop.md for desktop config, platform args.
Reference Files
| File | Contents |
|---|---|
signals-hooks.md | Signals, use_memo, use_effect, use_resource, context |
rsx-patterns.md | RSX syntax, props, events, conditionals, lists |
fullstack.md | Server functions, SSR, WebSocket, extractors |
router.md | Routes, layouts, navigation, parameters |
cli-desktop.md | CLI commands, desktop config, platforms |
Critical Knowledge
Element is Result (0.6+)
Use ? anywhere - propagates to ErrorBoundary:
#[component]
fn Profile(id: u32) -> Element {
let user = get_user(id)?; // Early return on error
rsx! { "{user.name}" }
}Suspense for Async
rsx! {
SuspenseBoundary {
fallback: |_| rsx! { "Loading..." },
AsyncChild {}
}
}
fn AsyncChild() -> Element {
let data = use_resource(fetch_data).suspend()?;
rsx! { "{data}" }
}Document Head
use dioxus::document::{Title, Link, Meta};
rsx! {
Title { "My Page" }
Meta { name: "description", content: "..." }
Link { rel: "stylesheet", href: asset!("/style.css") }
}Stores for Nested State (0.7+)
#[derive(Store)]
struct AppState {
users: BTreeMap<String, User>,
}
#[component]
fn UserList(state: Store<AppState>) -> Element {
let users = state.users();
rsx! {
for (id, user) in users.iter() {
UserRow { key: "{id}", user } // Only changed items re-render
}
}
}CSS Modules (0.7.3+)
css_module!(Styles = "/styles.module.css", AssetOptions::css_module());
rsx! {
div { class: Styles::container, // Typed, compile-checked
p { class: Styles::title, "Hello" }
}
}Fullstack Server Setup
use axum::Router;
use dioxus::prelude::*;
#[tokio::main]
async fn main() {
let app = Router::new()
.serve_static_assets("dist")
.serve_dioxus_application(ServeConfig::new(), App);
let listener = tokio::net::TcpListener::bind("0.0.0.0:3000").await.unwrap();
axum::serve(listener, app).await.unwrap();
}Reactivity Gotchas
Memos in attributes don't subscribe properly:
// BAD: Won't update
let style = use_memo(move || format!("color: {}", color()));
rsx! { div { style: style } }
// GOOD: Direct signal read
rsx! { div { style: format!("color: {}", color()) } }Use individual CSS properties:
// GOOD: Proper reactivity
rsx! {
p {
font_weight: if bold() { "bold" } else { "normal" },
text_align: "{align}",
}
}Native FFI Bridge (0.7.4+)
Write mobile plugins in Kotlin/Java/Swift with dioxus_platform_bridge. CLI auto-bundles via linker metadata:
#[cfg(all(feature = "metadata", target_os = "android"))]
dioxus_platform_bridge::android_plugin!(
plugin = "geolocation",
aar = { env = "DIOXUS_ANDROID_ARTIFACT" },
deps = ["implementation(\"com.google.android.gms:play-services-location:21.3.0\")"]
);Hot-Reload Boundaries
Instant reload: Literal values, text, formatted segments, attribute order, template structure
Requires rebuild: Rust logic, component structure, control flow conditions, struct field changes
Workspace hot-patching (0.7.4+): Subsecond now patches across workspace library crates, not just the tip crate.