### Install and Serve Dioxus App with CLI

Source: https://github.com/dioxuslabs/dioxus/blob/main/packages/dioxus/README.md

Commands to install the Dioxus CLI and create/serve a new Dioxus application. This is the recommended way to start a new project and run it on different platforms.

```shell
# install the dioxus-cli
curl -fsSL https://dioxuslabs.com/install.sh | bash

# create a new app, following the template instructions
dx new my-app && cd my-app

# and then serve on `--web, --desktop, --ios, or --android`
dx serve --desktop
```

--------------------------------

### Serve Dioxus Application

Source: https://github.com/dioxuslabs/dioxus/blob/main/examples/01-app-demos/ecommerce-site/README.md

Command to start the Dioxus development server. This command automatically initializes the Tailwind CSS watcher if a tailwind.css file is detected in the project root.

```bash
dx serve
```

--------------------------------

### Running examples with Cargo

Source: https://github.com/dioxuslabs/dioxus/blob/main/README.md

Command to run examples from the main branch of the Dioxus repository using Cargo.

```sh
cargo run --example <example>
```

--------------------------------

### Serving examples with Dioxus CLI for Web

Source: https://github.com/dioxuslabs/dioxus/blob/main/README.md

Command to serve examples using the Dioxus CLI for the web platform, disabling default features.

```sh
dx serve --example <example> --platform web -- --no-default-features
```

--------------------------------

### Run Dioxus Application

Source: https://github.com/dioxuslabs/dioxus/blob/main/examples/01-app-demos/file-explorer/README.md

Execute this command in the terminal to start the development server for the Dioxus application.

```bash
dx serve
```

--------------------------------

### Install and Verify CLI

Source: https://github.com/dioxuslabs/dioxus/blob/main/notes/RELEASING.md

Commands to install the local version of the Dioxus CLI and update dependencies to ensure the release environment is consistent with the current repository state.

```shell
cargo install --path packages/cli
cargo update
```

--------------------------------

### Installing Dioxus CLI from Git

Source: https://github.com/dioxuslabs/dioxus/blob/main/README.md

Command to install the Dioxus CLI directly from its Git repository using Cargo.

```sh
cargo install --git https://github.com/DioxusLabs/dioxus dioxus-cli --locked
```

--------------------------------

### Installing Dioxus CLI

Source: https://github.com/dioxuslabs/dioxus/blob/main/README.md

Command to install the Dioxus CLI using a shell script.

```sh
curl -fsSL https://dioxuslabs.com/install.sh | bash
```

--------------------------------

### Complete Dioxus App Example with Permissions

Source: https://github.com/dioxuslabs/dioxus/blob/main/notes/architecture/12-MANIFEST-SYSTEM.md

A comprehensive Dioxus.toml example for a geolocation app, demonstrating unified permissions for location and notifications, along with platform-specific settings for iOS and macOS. This showcases how to configure an application's core features and platform integrations.

```toml
[application]
name = "GeoTracker"

[bundle]
identifier = "com.example.geotracker"

# Unified permissions - automatically mapped to each platform
[permissions]
location = { precision = "fine", description = "Track your precise location for navigation" }
notifications = { description = "Send alerts when you arrive at destinations" }

# iOS-specific settings
[ios]
deployment_target = "15.0"

[ios.plist]
UIBackgroundModes = ["location"]

[ios.entitlements]
"com.apple.developer.healthkit" = false

# Android-specific settings
[android]
min_sdk = 24
target_sdk = 34
features = ["android.hardware.location.gps"]

# macOS-specific settings
[macos]
minimum_system_version = "11.0"

[macos.entitlements]
"com.apple.security.app-sandbox" = true

```

--------------------------------

### Basic Dioxus App Structure

Source: https://github.com/dioxuslabs/dioxus/blob/main/packages/dioxus/README.md

A minimal Dioxus application demonstrating a counter with buttons to increment and decrement. This example shows the basic structure of a Dioxus app, including launching the app and defining the UI with signals for state management.

```rust
use dioxus::prelude::*;

fn main() {
    dioxus::launch(app);
}

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

--------------------------------

### Initializing and Rebuilding Virtual DOM (Rust)

Source: https://github.com/dioxuslabs/dioxus/blob/main/packages/core/README.md

Illustrates how to initialize a Dioxus Virtual DOM with a root component and generate the initial set of mutations for rendering. This is a fundamental step for starting a Dioxus application.

```rust
# use dioxus::dioxus_core::{Mutations, VirtualDom};
use dioxus::prelude::*;

// First, declare a root component
fn app() -> Element {
    rsx! {
        div { "hello world" }
    }
}

fn main() {
    // Next, create a new VirtualDom using this app as the root component.
    let mut dom = VirtualDom::new(app);

    // The initial render of the dom will generate a stream of edits for the real dom to apply
    let mutations = dom.rebuild_to_vec();
}
```

--------------------------------

### Initialize and Use Dioxus Logger

Source: https://github.com/dioxuslabs/dioxus/blob/main/packages/logger/README.md

Demonstrates how to initialize the logger with a specific tracing level and use the info macro within a Dioxus component. This setup ensures logs are captured across different platform targets.

```rust
use dioxus::prelude::*;
use dioxus_logger::tracing::{Level, info};

fn main() {
  dioxus_logger::init(Level::INFO).expect("logger failed to init");
  dioxus::launch(App);
}

#[component]
fn App() -> Element {
  info!("App rendered");
  rsx! {
    p { "hi" }
  }
}
```

```rust
use dioxus::prelude::*;
use dioxus::logger::tracing::{Level, info};

fn main() {
  dioxus::logger::init(Level::INFO).expect("logger failed to init");
  dioxus::launch(App);
}

#[component]
fn App() -> Element {
  info!("App rendered");
  rsx! {
    p { "hi" }
  }
}
```

--------------------------------

### Diffing Algorithm Entry Point

Source: https://github.com/dioxuslabs/dioxus/blob/main/notes/architecture/01-CORE.md

Identifies the starting point for the diffing algorithm, `diff_scope()`, which compares old and new VNodes to determine necessary DOM mutations.

```rust
// Entry point for diffing
diff_scope(old_vnode, new_vnode, dom, mutations)
```

--------------------------------

### Install Dioxus CLI

Source: https://github.com/dioxuslabs/dioxus/blob/main/packages/cli/README.md

Commands to install the Dioxus CLI tool using Cargo. Users can choose between the stable version, the latest development build from git, or a local build.

```shell
cargo install dioxus-cli
```

```shell
cargo install --git https://github.com/DioxusLabs/dioxus dioxus-cli
```

```shell
cargo install --path .
```

--------------------------------

### Rust: Store Path Tracking Example

Source: https://github.com/dioxuslabs/dioxus/blob/main/notes/architecture/04-SIGNALS.md

Demonstrates how Dioxus Stores track changes to nested fields. Writing to a nested field only invalidates subscribers whose paths include that specific field, ensuring granular reactivity.

```rust
let store = Store::new(vec![a, b, c]);
let item_1 = store[1];    // path = [1]
let field = item_1.name;  // path = [1, field_hash]

// Writing store[1].name only marks dirty:
// - subscribers at path [1]
// - subscribers at path [1, field_hash]
// - NOT path [0] or [2]
```

--------------------------------

### Filename Generation Examples

Source: https://github.com/dioxuslabs/dioxus/blob/main/notes/architecture/08-ASSETS.md

Illustrates how different asset types are transformed with hash-based cache busting in their filenames.

```rust
IMAGE: /assets/photo.png → /assets/photo-{hash}.webp
CSS/JS: /assets/style.css → /assets/style-{hash}.css
FOLDER: /assets (folder) → /assets/ (unchanged)
```

--------------------------------

### Demonstrate use_resource Reactivity with Server Requests (Rust)

Source: https://github.com/dioxuslabs/dioxus/blob/main/packages/hooks/docs/use_resource.md

Illustrates the reactive nature of `use_resource` by creating a resource that doubles a signal's value via a simulated server request. It shows how changes to the `count` signal trigger the resource to rerun, updating the result. The example also details how to check the resource's state (`Pending`, `Done`, `Stopped`) and retrieve its value at different stages.

```rust
# use dioxus::prelude::*
// Create a new count signal
let mut count = use_signal(|| 1);
// Create a new resource that doubles the value of count
let double_count = use_resource(move || async move {
    // Start a request to the server. We are reading the value of count in the format macro
    // Reading the value of count makes the resource "subscribe" to changes to count (when count changes, the resource will rerun)
    let response = reqwest::get(format!("https://myserver.com/doubleme?count={count}")).await.unwrap();
    response.text().await.unwrap()
});

// Resource can be read in a way that is similar to signals, but they have a bit of extra information about the state of the resource future.

// Calling .state() on a resource will return a Signal<UseResourceState> with information about the current status of the resource
println!("{:?}", double_count.state().read()); // Prints "UseResourceState::Pending"

// You can also try to get the last resolved value of the resource with the .value() method
println!("{:?}", double_count.read()); // Prints "None"

// Wait for the resource to finish and get the value
std::thread::sleep(std::time::Duration::from_secs(1));

// Now if we read the state, we will see that it is done
println!("{:?}", double_count.state().read()); // Prints "UseResourceState::Done"

// And we can get the value
println!("{:?}", double_count.read()); // Prints "Some(2)"

// Now if we write to count, the resource will rerun
count += 1; // count is now 2

// Wait for the resource to finish and get the value
std::thread::sleep(std::time::Duration::from_secs(1));

// Now if we read the state, we will see that it is done
println!("{:?}", double_count.state().read()); // Prints "UseResourceState::Done"

// And we can get the value
println!("{:?}", double_count.read()); // Prints "Some(4)"

// One more case, what happens if we write to the resource while it is in progress?
// The resource will rerun and the value will be None
count += 1; // count is now 3

// If we write to a value the resource subscribes to again, it will cancel the current future and start a new one
count += 1; // count is now 4

println!("{:?}", double_count.state().read()); // Prints "UseResourceState::Stopped"
println!("{:?}", double_count.read()); // Prints the last resolved value "Some(4)"

// After we wait for the resource to finish, we will get the value of only the latest future
std::thread::sleep(std::time::Duration::from_secs(1));

println!("{:?}", double_count.state().read()); // Prints "UseResourceState::Done"

println!("{:?}", double_count.read()); // Prints "Some(8)"
```

--------------------------------

### CSS Module Integration Example

Source: https://github.com/dioxuslabs/dioxus/blob/main/notes/architecture/08-ASSETS.md

Demonstrates how to use the `css_module!()` macro to generate Rust structs with scoped CSS class names, which are automatically injected on dereference.

```rust
css_module!(Styles = "/my.module.css", AssetOptions::css_module());

// Generates:
struct Styles {}
impl Styles {
    pub const header: &str = "abc[hash]";  // Unique scoped class
    pub const button: &str = "def[hash]";
}
```

--------------------------------

### Implementing Local Subscriptions

Source: https://github.com/dioxuslabs/dioxus/blob/main/packages/signals/README.md

Shows how signals trigger re-renders only in components that read the signal value. This example demonstrates passing signals through props and the context API to optimize component updates.

```rust
use dioxus::prelude::*;
use dioxus_signals::*;

#[component]
fn App() -> Element {
    let mut signal = use_signal(|| 0);

    rsx! {
        button {
            onclick: move |_| {
                signal += 1;
            },
            "Increase"
        }
        for id in 0..10 {
            Child { signal }
        }
    }
}

#[derive(Props, Clone, PartialEq)]
struct ChildProps {
    signal: Signal<usize>,
}

fn Child(props: ChildProps) -> Element {
    rsx! { "{props.signal}" }
}

#[component]
fn ContextApp() -> Element {
    use_context_provider(|| Signal::new(0));
    rsx! { ChildComponent {} }
}

#[component]
fn ChildComponent() -> Element {
    let signal: Signal<i32> = use_context();
    rsx! { "{signal}" }
}
```

--------------------------------

### Manage Memo Lifecycle and Dependencies

Source: https://github.com/dioxuslabs/dioxus/blob/main/packages/hooks/docs/derived_state.md

Shows how memos act as read-only signals and how they trigger downstream updates only when their output value changes. This example illustrates the reactive chain between multiple memos.

```rust
let mut count = use_signal(|| 1);
let double_count = use_memo(move || count() * 2);

println!("{}", double_count);

count += 1;
println!("{}", double_count);

let double_count_plus_one = use_memo(move || double_count() + 1);
println!("{}", double_count_plus_one);

count += 1;
println!("{}", double_count);
println!("{}", double_count_plus_one);

*count.write() = 3;
println!("{}", double_count);
println!("{}", double_count_plus_one);
```

--------------------------------

### Implement Reactive Nested Data with Dioxus Stores

Source: https://github.com/dioxuslabs/dioxus/blob/main/packages/stores/README.md

Demonstrates how to derive the Store trait on a data structure and use it within Dioxus components. The example shows how to scope stores to specific fields like 'count' and 'children' to achieve granular reactivity.

```rust
use dioxus::prelude::*;
use dioxus_stores::*;

fn main() {
    dioxus::launch(app);
}

#[derive(Store, Default)]
struct CounterTree {
    count: i32,
    children: Vec<CounterTree>,
}

fn app() -> Element {
    let value = use_store(Default::default);

    rsx! {
        Tree {
            value
        }
    }
}

#[component]
fn Tree(value: Store<CounterTree>) -> Element {
    let mut count = value.count();
    let mut children = value.children();

    rsx! {
        button {
            onclick: move |_| count += 1,
            "Increment"
        }
        button {
            onclick: move |_| children.push(Default::default()),
            "Push child"
        }
        ul {
            for value in children.iter() {
                li {
                    Tree { value }
                }
            }
        }
    }
}
```

--------------------------------

### Install Linux Dependencies for Dioxus

Source: https://github.com/dioxuslabs/dioxus/blob/main/notes/CONTRIBUTING.md

Installs the required GTK and WebKit development libraries on Linux systems. These dependencies are necessary for building and running Dioxus applications that utilize webview components.

```bash
sudo apt install libgdk3.0-cil libatk1.0-dev libcairo2-dev libpango1.0-dev libgdk-pixbuf2.0-dev libsoup-3.0-dev libjavascriptcoregtk-4.1-dev libwebkit2gtk-4.1-dev
```

--------------------------------

### Basic Dioxus Desktop App Structure

Source: https://github.com/dioxuslabs/dioxus/blob/main/packages/desktop/src/readme.md

This is the main entry point for a Dioxus Desktop application. It launches the app using the provided component.

```rust
use dioxus::prelude::*;

fn main() {
    dioxus_desktop::launch(app);
}

fn app() -> Element {
    rsx! {
        div {
            "hello world!"
        }
    }
}
```

--------------------------------

### Create a new Dioxus project

Source: https://github.com/dioxuslabs/dioxus/blob/main/packages/desktop/src/readme.md

Use cargo to create a new binary project and navigate into the directory.

```shell
cargo new --bin demo
cd app
```

--------------------------------

### Package and Publish Dioxus Extension

Source: https://github.com/dioxuslabs/dioxus/blob/main/packages/extension/DEV.md

Navigate to your extension's directory and use `vsce package` to create a `.vsix` file. Then, use `vsce publish` to upload it to the VS Code Marketplace.

```bash
cd myExtension
vsce package
# myExtension.vsix generated
vsce publish
# <publisherID>.myExtension published to VS Code Marketplace
```

--------------------------------

### Initialize Dioxus Project

Source: https://github.com/dioxuslabs/dioxus/blob/main/packages/cli/README.md

Command to initialize a new Dioxus project using the CLI. It clones the project from the official template repository.

```shell
dx new --template gh:dioxuslabs/dioxus-template
```

--------------------------------

### Rust Compilation Error Example

Source: https://github.com/dioxuslabs/dioxus/blob/main/packages/cli/assets/web/dev.loading.html

An example of a diagnostic error message generated by the Rust compiler when using the Dioxus rsx! macro. This demonstrates a common syntax error where a semicolon is missing before the macro invocation.

```rust
error: expected `;`, found `rsx`
--> src/main.rs:21:6
|
21 | a
| ^ help: add `;` here
22 | rsx! {
| --- unexpected token
error: could not compile `my-cool-app` (bin "my-cool-app") due to 1 previous error
```

--------------------------------

### Rust Hot-patching with Subsecond

Source: https://github.com/dioxuslabs/dioxus/blob/main/notes/releases/0.7.0-alpha.0.md

Demonstrates how to use the Subsecond library for hot-patching Rust code at runtime. This allows for simultaneous iteration on frontend and backend code without restarting the application. It requires explicit integration points using `subsecond::call`.

```rust
pub fn launch() {
    loop {
        std::thread::sleep(std::time::Duration::from_secs(1));
        subsecond::call(|| tick());
    }
}

fn tick() {
    println!("edit me to see the loop in action!!!!!!!!! ");
}
```

--------------------------------

### Add Dioxus and Desktop Renderer Dependencies

Source: https://github.com/dioxuslabs/dioxus/blob/main/packages/desktop/src/readme.md

Add the necessary Dioxus and dioxus-desktop crates to your project's Cargo.toml file.

```shell
cargo add dioxus
cargo add dioxus-desktop
```

--------------------------------

### Future Concepts - secret!() Macro

Source: https://github.com/dioxuslabs/dioxus/blob/main/notes/architecture/08-ASSETS.md

Example of a secret!() macro for compile-time validation and runtime injection of secrets from secure stores.

```rust
const API_KEY: Secret = secret!("DIOXUS_API_KEY");
// Compile-time validation
// Runtime injection from secure store
```

--------------------------------

### Define Application Routes with Routable

Source: https://github.com/dioxuslabs/dioxus/blob/main/packages/hooks/README.md

The Router component uses a derived Routable enum to manage navigation. This example demonstrates defining a route with a dynamic parameter.

```rust
#[derive(Routable, Clone, PartialEq)]
enum Route {
    #[route("/user/:id")]
    Homepage { id: u32 }
}
```

--------------------------------

### Run Dioxus Workspace Tests

Source: https://github.com/dioxuslabs/dioxus/blob/main/notes/CONTRIBUTING.md

Executes the full test suite for the Dioxus workspace using Cargo. This command verifies the integrity of all crates within the project.

```bash
cargo test --workspace --tests
```

--------------------------------

### Configure JavaScript Assets with AssetOptions

Source: https://github.com/dioxuslabs/dioxus/blob/main/packages/manganis/manganis/README.md

Configure JavaScript assets for minification, static head inclusion, preloading, and module type. Options include `with_minify`, `with_static_head`, `with_preload`, and `with_module`.

```rust
use manganis::{asset, Asset, AssetOptions};

// Vendored UMD library: copy verbatim, emitted as a classic <script>.
const SWEETALERT: Asset = asset!(
    "/assets/sweetalert2.all.min.js",
    AssetOptions::js().with_minify(false).with_static_head(true)
);

// Authored ES module with local imports: auto-detected from the top-level
// `import`/`export`, bundled and minified into a single ESM file, emitted as
// `<script type="module">`.
const APP: Asset = asset!(
    "/assets/app.js",
    AssetOptions::js().with_static_head(true)
);
```

--------------------------------

### Future Concepts - IAAC Macro

Source: https://github.com/dioxuslabs/dioxus/blob/main/notes/architecture/08-ASSETS.md

Example of using a hypothetical asset! macro for Infrastructure as Code (IAAC), where assets like configuration files can be declared and processed by the CLI.

```rust
const DATABASE_CONFIG: Asset = asset!("/config/db.yaml");
// CLI extracts, validates, deploys
```

--------------------------------

### Adding New Asset Types - Create Options Struct

Source: https://github.com/dioxuslabs/dioxus/blob/main/notes/architecture/08-ASSETS.md

Example of creating an options struct for a new asset type, deriving necessary traits like SerializeConst.

```rust
#[derive(SerializeConst, ...)]
pub struct VideoAssetOptions {
    format: VideoFormat,
    preload: bool,
}
```

--------------------------------

### Interleave Hot-Reload Anchors for Frameworks

Source: https://github.com/dioxuslabs/dioxus/blob/main/packages/subsecond/README.md

Demonstrates how framework authors can interleave hot-reload entrypoints to manage stateful code and granularly control reload behavior.

```rust
fn main() {
	webserver::serve("0.0.0.0:8080", || {
		Router::new()
			.get("/", |req| Response::websocket(handle_socket))
	})
}

fn handle_socket(ws: &WebSocket) {
	subsecond::call(|| {
		// do things with the websocket
	})
}
```

--------------------------------

### Integrate Dioxus with Axum Router

Source: https://github.com/dioxuslabs/dioxus/blob/main/packages/fullstack-server/README.md

Illustrates how to integrate a Dioxus application into an existing Axum router using the DioxusRouterExt trait. This setup handles server-side routing and provides a fallback for Dioxus components.

```rust
#![allow(non_snake_case)]
use dioxus::prelude::*;

#[cfg(feature = "server")]
#[tokio::main]
async fn main() {
    use dioxus_server::DioxusRouterExt;
    let address = dioxus::cli_config::fullstack_address_or_localhost();
    let router = axum::Router::new()
        .serve_dioxus_application(dioxus_server::ServeConfig::new(), App);

    let router = router.into_make_service();
    let listener = tokio::net::TcpListener::bind(address).await.unwrap();
    axum::serve(listener, router).await.unwrap();
}

#[cfg(not(feature = "server"))]
fn main() {
    dioxus::launch(App);
}

#[component]
fn App() -> Element {
    let mut meaning = use_signal(|| None);
    rsx! {
        h1 { "Meaning of life: {meaning:?}" }
        button {
            onclick: move |_| async move {
                if let Ok(data) = get_meaning("life the universe and everything".into()).await {
                    meaning.set(data);
                }
            },
            "Run a server function"
        }
    }
}

#[server]
async fn get_meaning(of: String) -> ServerFnResult<Option<u32>> {
    Ok(of.contains("life").then(|| 42))
}
```

--------------------------------

### Basic Virtual DOM Rendering Loop (Rust)

Source: https://github.com/dioxuslabs/dioxus/blob/main/packages/core/README.md

Demonstrates a basic event handling and rendering loop for a Dioxus Virtual DOM. It shows how to initialize a VirtualDom, handle incoming events, and apply mutations to a real DOM. This snippet requires a runtime environment like Tokio.

```rust
# tokio::runtime::Runtime::new().unwrap().block_on(async {
use dioxus_core::{VirtualDom, Event, Element, Mutations, VNode, ElementId};

let mut vdom = VirtualDom::new(app);
let real_dom = SomeRenderer::new();

loop {
    tokio::select! {
        evt = real_dom.event() => {
            let evt = Event::new(evt, true);
            vdom.runtime().handle_event("onclick", evt, ElementId(0))
        },
        _ = vdom.wait_for_work() => {}
    }
    vdom.render_immediate(&mut real_dom.apply())
}

# fn app() -> Element { VNode::empty() }
# struct SomeRenderer; impl SomeRenderer { fn new() -> SomeRenderer { SomeRenderer } async fn event(&self) -> std::rc::Rc<dyn std::any::Any> { unimplemented!() } fn apply(&self) -> Mutations { Mutations::default() } }
# });
```

--------------------------------

### Native Compilation Commands

Source: https://github.com/dioxuslabs/dioxus/blob/main/notes/architecture/11-NATIVE-PLUGIN-FFI.md

Provides shell commands for compiling native source files for different platforms. Includes Swift for iOS/macOS, Kotlin for Android (including DEX conversion), and C via Clang.

```bash
# Swift iOS
swiftc -target arm64-apple-ios15.0 -sdk /path/to/iPhoneOS.sdk -emit-library -o libplugins.a LocationManager.swift

# Kotlin Android
kotlinc Geolocator.kt -include-runtime -d classes/
d8 classes/*.class --output dex/

# C Android
$NDK/toolchains/llvm/prebuilt/*/bin/clang --target=aarch64-linux-android21 -c fast_math.c -o fast_math.o
```

--------------------------------

### Add Database Support to Dioxus Configuration

Source: https://github.com/dioxuslabs/dioxus/blob/main/notes/architecture/05-FULLSTACK.md

Demonstrates how to provide a database instance as a context within the Dioxus configuration. This allows server functions to easily access the database using `consume_context`. Requires a `Database` struct and `Any` trait.

```rust
config.provide_context(|| {
    Box::new(Database::new()) as Box<dyn Any>
});

#[server] async fn get_user(id: i32) -> Result<User> {
    let db = consume_context::<Database>();
    db.query(...).await
}
```

--------------------------------

### Component Definition in Dioxus

Source: https://github.com/dioxuslabs/dioxus/blob/main/AGENTS.md

Demonstrates a typical component definition in Dioxus using the `#[component]` attribute and the `rsx!` macro for UI declaration. It includes state management with `use_signal` and event handling for a button click.

```rust
#[component]
fn MyComponent(name: String) -> Element {
    let mut count = use_signal(|| 0);
    rsx! {
        button { onclick: move |_| count += 1, "{name}: {count}" }
    }
}
```

--------------------------------

### Serve Dioxus App on Multiple Platforms (Rust)

Source: https://github.com/dioxuslabs/dioxus/blob/main/examples/01-app-demos/hotdog/README.md

This code snippet demonstrates how to serve the Dioxus demo application on different platforms using the Dioxus CLI. It requires the Dioxus CLI to be installed and configured.

```rust
dx serve --platform web
dx serve --platform desktop
dx serve --platform ios
dx serve --platform android
```

--------------------------------

### Server Function Macro Implementation

Source: https://github.com/dioxuslabs/dioxus/blob/main/notes/architecture/05-FULLSTACK.md

Demonstrates the dual-path code generation for the #[server] macro. It shows the client-side request encoding logic and the server-side Axum handler registration process.

```rust
// Client-side request encoding
let client = ClientRequest::new(Method::POST, endpoint, &query);
let response = ServerFnEncoder::fetch_client(client, args, unpack).await;
let result = ServerFnDecoder::decode_client_response(response).await;

// Server-side Axum handler registration
fn __inner__function__(state, request) -> Response {
    // Extract arguments from request
    // Call actual function
    // Serialize response
}

inventory::submit! {
    ServerFunction::new(Method::POST, path, handler)
}
```

--------------------------------

### Dioxus Configuration File

Source: https://github.com/dioxuslabs/dioxus/blob/main/packages/cli/README.md

A sample Dioxus.toml configuration file. This file defines application metadata, target platforms, and resource paths required for the CLI to build the project.

```toml
[application]
name = "project-name"
# Currently supported platforms: web, desktop
default_platform = "web"

# Optional: enable copying from a static directory (e.g. "public")
public_dir = "public"

[web.app]
title = "Hello"

[web.resource.dev]
```

--------------------------------

### Prohibited Hook Patterns in Dioxus

Source: https://github.com/dioxuslabs/dioxus/blob/main/packages/hooks/docs/rules_of_hooks.md

Examples of common mistakes when using hooks, including calling them inside conditionals, loops, event handlers, and initialization closures, all of which violate the requirement for consistent hook ordering.

```rust
// ❌ Inside Conditionals
fn App() -> Element {
    let number = use_signal(|| 1);
    if number() == 1 {
        let string = use_signal(|| "hello world".to_string());
    }
    todo!()
}

// ❌ Inside Loops
fn App() -> Element {
    let number = use_signal(|| 1);
    for i in 0..number() {
        let string = use_signal(|| "hello world".to_string());
    }
    todo!()
}

// ❌ Inside Event Handlers
fn App() -> Element {
    rsx! {
        button {
            onclick: move |_| {
                use_signal(|| "hello world".to_string());
            },
            "Click me"
        }
    }
}

// ❌ Inside Initialization Closures
fn App() -> Element {
    let number = use_signal(|| {
        let string = use_signal(|| "hello world".to_string());
        string()
    });
    todo!()
}
```

--------------------------------

### Async Hot-Reloading Integration (Rust)

Source: https://github.com/dioxuslabs/dioxus/blob/main/notes/architecture/07-HOTRELOAD.md

Illustrates how to set up asynchronous hot-reloading using Tokio. The `serve_subsecond_with_args` function manages the server and integrates with an async application's main function.

```rust
#[tokio::main]
async fn main() {
    dioxus_devtools::serve_subsecond_with_args(
        state,
        |state| async {
            app_main(state).await
        }
    ).await;
}

```

--------------------------------

### Render Dioxus rsx! Nodes to HTML

Source: https://github.com/dioxuslabs/dioxus/blob/main/packages/ssr/README.md

Renders a Dioxus rsx! block directly to an HTML string without needing a full VirtualDOM. This is suitable for simpler, non-interactive content. The `no_run` attribute indicates it's a conceptual example.

```rust
# use dioxus::prelude::*
let content = dioxus_ssr::render_element(rsx! {
    div {
        for i in 0..5 {
            "Number: {i}"
        }
    }
});
```

--------------------------------

### Implement Hot-Reloading for Library Authors

Source: https://github.com/dioxuslabs/dioxus/blob/main/packages/subsecond/README.md

Demonstrates how library authors can use subsecond::current to create hot-reloadable function handlers. It includes checking for changes, registering callbacks, and executing the hot function.

```rust
pub fn tick(handler: Fn(Request) -> Response) {
	let hot_fn = subsecond::current(handler);

	if hot_fn.changed() {
		// do thing
	}

	hot_fn.on_changed(|| /* do thing */);

	hot_fn.call((request))
}
```

--------------------------------

### Implement Hot-Reloading for Application Authors

Source: https://github.com/dioxuslabs/dioxus/blob/main/packages/subsecond/README.md

Shows how application authors can wrap logic within subsecond::call to enable hot-reloading for specific functions.

```rust
fn handle_request(request: Request) -> Response {
	subsecond::call(|| {
		// do_thing...
	})
}
```

--------------------------------

### Customize Dioxus Server Function Responses

Source: https://github.com/dioxuslabs/dioxus/blob/main/notes/architecture/05-FULLSTACK.md

Provides an example of how to customize the HTTP response from a Dioxus server function. It uses `FullstackContext::current().unwrap()` to access the context and `ctx.set_response_headers(headers)` to modify response headers before returning data.

```rust
#[server]
async fn custom_response() -> Result<String> {
    let ctx = FullstackContext::current().unwrap();
    ctx.set_response_headers(headers);
    Ok("data".to_string())
}
```

--------------------------------

### Basic Dioxus App

Source: https://github.com/dioxuslabs/dioxus/blob/main/README.md

A simple Dioxus application demonstrating state management with signals and rendering UI elements.

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

--------------------------------

### Manage State with Hooks

Source: https://github.com/dioxuslabs/dioxus/blob/main/packages/hooks/README.md

Demonstrates how to initialize local component state using signals and memoized values derived from those signals.

```rust
let mut count = use_signal(|| 0);
let doubled = use_memo(move || count() * 2);
```

--------------------------------

### Dioxus use_effect with onmounted for DOM Access

Source: https://github.com/dioxuslabs/dioxus/blob/main/packages/hooks/docs/side_effects.md

Shows how to combine `use_effect` with the `onmounted` event in Dioxus to access and manipulate DOM elements after they have been rendered. This example reads the dimensions of a div element after it's mounted and updates a signal with the rendered size and text.

```rust
# use dioxus::prelude::*
fn MyComponent() -> Element {
    let mut current_text = use_signal(String::new);
    let mut mounted_text_div: Signal<Option<MountedEvent>> = use_signal(|| None);
    let mut rendered_size = use_signal(String::new);

    use_effect(move || {
        // If we have mounted the text div, we can read the width of the div
        if let Some(div) = mounted_text_div() {
            // We read the current text here inside of the effect instead of the spawn so the effect subscribes to the signal
            let text = current_text();
            spawn(async move {
                let bounding_box = div.get_client_rect().await;
                rendered_size.set(format!("{text} is {bounding_box:?}"));
            });
        }
    });

    rsx! {
        input {
            // When you enter text into the input, the effect will rerun because it subscribes to the current_text signal
            oninput: move |evt| current_text.set(evt.value()),
            placeholder: "Enter text here",
            value: "{current_text}"
        }
        // When text changes, it will change the size of this div
        div {
            onmounted: move |element| {
                mounted_text_div.set(Some(element.clone()));
            },
            "{current_text}"
        }

        "{rendered_size}"
    }
}
```