---
obj: concept
website: https://dioxuslabs.com
repo: https://github.com/dioxuslabs/dioxus
---

# Dioxus
Dioxus is a modern, ergonomic, and high-performance Rust framework for building user interfaces using a Virtual DOM (like React). It supports Web, Desktop, TUI, and Mobile targets using a unified component model.

## Application
A dioxus app is just a normal rust application. To get started depend on `dioxus` and start with this `main.rs`:

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

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

#[component]
pub fn App() -> Element {
    rsx! {
        p { "Hello World!" }
    }
}
```

## Components (RSX)

Dioxus components are Rust functions that return `Element` and use the `rsx!` macro (similar to JSX). The UI is made with HTML and CSS.

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

#[component]
fn App() -> Element {
    rsx! {
        div {
            h1 { "Hello, Dioxus!" }
        }
    }
}
```

You can define your own components and take values (Props):

```rust

#[component]
fn MyComp(value: String, myevent: EventHandler<MouseEvent>, children: Element) -> Element {
    rsx! {
        button {
            onclick: myevent,
            title: value,
            {children}
        }
    }
}

// Usage
#[component]
fn App() -> Element {
    rsx! {
        MyComp {
            // Event Handler
            onclick: move |_| { println!("Clicked"); },
            // Value
            title: "my_title",
            // children
            p {
                "Hello World"
            }
        }
    }
}

```

### Event Handler

Event handling is done inline using closures:

```rust
rsx!(
    button {
        onclick: move |_| println!("Button clicked"),
        "Click me"
    }
)
```

Each event handler receives an event struct (e.g., `MouseEvent`, `FormEvent`).

## Hooks

Dioxus has a powerful hook system that allows you to manage state, side effects, and asynchronous operations in your components. With these hooks the UI gets automatically reloaded when needed.

> **Warning**: Always call the hooks in the same order or they will not work correctly. This means no hooks in loops or conditions.

### `use_signal`

Creates a reactive value that can be read and updated. When the value changes, the component re-renders.

```rust
let count = use_signal(|| 0);
rsx! {
    button { onclick: move |_| count.set(count() + 1), "Increment" }
    p { "Value is {count}" }
}
```

### `use_memo`

Computes a derived value that only re-evaluates when its dependencies change.

```rust
let doubled = use_memo(|| count() * 2);
```

### `use_effect`

Runs a side effect after the component renders. Useful for operations which should run beside the UI.

```rust
use_effect(|| {
    // Side effect code here
});
```

### `use_resource`

Manages an asynchronous resource, such as data fetched from an API.

```rust
let resource = use_resource(|| fetch_data());
```

### `use_drop`

Registers a callback to be run before the component is removed. Useful for cleaning up side effects.

```rust
use_drop(|| {
    // Cleanup code here
});
```

## Assets
To include assets (like CSS) in our app, you can use the `asset!()` macro. This macro ensures the asset will be included in the final app bundle.

```rust
static MY_CSS: Asset = asset!("/assets/main.css");

fn App() -> Element {
    rsx! {
        document::Stylesheet { href: MY_CSS }
    }
}
```

## Routing

You can have different routes in your app using dioxus router. To use the router enable the `router` feature in the `dioxus` crate.

**Define the routes**:

```rust
// All of our routes will be a variant of this Route enum
#[derive(Routable, PartialEq, Clone)]
enum Route {
    // if the current location is "/home", render the Home component
    #[route("/home")]
    Home {},
    // if the current location is "/blog", render the Blog component
    #[route("/blog")]
    Blog {},
}

fn Home() -> Element {
    todo!()
}

fn Blog() -> Element {
    todo!()
}
```

To use the router and actually render the routes, add it to your main App component:
```rust
fn App() -> Element {
    rsx! {
        document::Stylesheet { href: asset!("/assets/main.css") }

        // Renders the current route
        Router::<Route> {}
    }
}
```

To move between routes you can either use a `Link` element or the `navigator`:

```rust
// Link Element
rsx! {
    Link { to: Route::Home {}, "Go home!" }
}

// Navigator
rsx! {
    button {
        onclick: move |_| {
            let nav = navigator();
            
            // push
            nav.push(Route::Blog {});
            
            // replace
            nav.replace(Route::Home {});
            
            // go back
            nav.go_back();
            
            // go forward
            nav.go_forward();
        },
        "Go somewhere"
    }
}
```