---
title: RSX
---

This macro is the recommended way to describe a ui, it is a div that holds multiple elements
```rust
fn app() -> Element {
    rsx! {
        button { "click me" }
        text { "This is some text" }
    }
}
```

> :::info `rsx!` is really just a div, so you can just do something like
> ```rust
> rsx! {
>     id: "root", class: "root",
>
>     button { "click me" }
>     text { "This is some text" }
> }
> ```

## Child values
If you want to add more children to values then just simply express it like a `rsx!`
```rust
fn app() -> Element {
    let x = 69;
    rsx! {
        div {
            text { "the number is {x}, Nice!" }
        }
    }
}
```

## Formatted text
```rust
fn app() -> Element {
    let x = 69;
    rsx! {
        text { "the number is {x}, Nice!" }
    }
}
```
> :::info You can also do expressions after the string
```rust
text { "the number is {}, Nice!", x }
```

## For loops
```rust
fn app() -> Element {
    rsx! {
        for (i in 0..5) { // () are required
            text { "{i}" }
        }
    }
}
```

## Attribute
You can change the element's struct fields by just providing some attributes before the children
```rust
fn app() -> Element {
    rsx! {
        text { class: "my_text" }
    }
}
```

## Handler functions
Instead of closures which are tricky to work with on structs, We use `Handler`, It's basically a closure wrapped with a `Arc<Mutex<T>>`
```rust
fn app() -> Element {
    rsx! {
        button {
            on_click: fn(btn: &mut Button, event, document) {
                // do something
            }
        }
    }
}
```

## Handler functions (with dependents)
If you have a `State<T>` and want to use it, you have to put a @ before the code block like this
```rust
fn app() -> Element {
    let count = State::new();

    rsx! {
        button {
            on_click: fn(btn: &mut Button, event, document) @count {
                let count = count.use_state(); // locks count so it can be used
            },
            "Current count: {count}"
        }
    }
}
```
> :::info you can add multiple decedents by separating them via `,` like: @var1, var2, var3

## Static text
If your text doesn't use variables that will change you can put `static` right before the text to signal that it's static.
```rust
fn app() -> Element {
    let count = 69; // count won't change since it's not mutable

    rsx! {
        text {
            static "Current count: {count}"
        }
    }
}
```