Dioxus 0.5+ Knowledge Patch Skill

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.

Agent Skills: Dioxus 0.5+ Knowledge Patch

Install this agent skill to your local

Skill Files