a few changes

docs/index.md

@@ -25,6 +25,7 @@ fn app() -> Element {
 ```
 
 ## A slightly more advanced app (counter)
+This app uses state management and a function using the state as a dependent
 ```rust title='src/main.rs'
 use osui::prelude::*;
 
@@ -33,20 +34,16 @@ fn main() {
 }
 
 fn app() -> Element {
+    let count = State::new(0);
+
     rsx! {
-        // Create a button with a on_click handler
         button {
-            on_click: fn(btn: &mut Button, _, document) {
-                let count = document.use_state::<u32>("count");
-                *count += 1;
-                btn.children.set_text(&count.to_string());
+            on_click: fn(_, _, _) @count {
+                count += 1;
             },
 
-            "0"
+            "The current count is: {count}"
         }
-
-        // Create a elemental field
-        @count: u32;
     }
 }
 ```

docs/references/a_rsx.md

@@ -114,4 +114,20 @@ fn app() -> Element {
         }
     }
 }
+```
+
+## Instructions
+Add an instruction by putting a `@` before it, like this:
+```rust
+pub fn app() -> Element {
+    rsx! {
+        @SetStyle(css! { // the SetStyle instruction
+            "title": {
+                color: Green,
+            }
+        })
+
+        text { class: "title", static "Hello world!" }
+    }
+}
 ```

docs/references/b_handler.md

@@ -22,21 +22,26 @@ rsx! {
 }
 ```
 ### With dependents
-If you have a `State<T>` and want to use it in a `fn()`, you have to put a @ before the code block like this
+If you have a `State<T>` and want to use it in a `fn()`, Pub a @ before the code block like this
 ```rust
-fn app() -> Element {
-    let count = State::new();
-
+pub fn app() -> Element {
+    let count = State::new(0);
     rsx! {
         button {
-            on_click: fn(btn: &mut Button, event, document) @count {
-                let count = count.use_state(); // locks count so it can be used
+            on_click: fn(_, _, _) @count {
+                count += 1;
             },
-            "Current count: {count}"
+            "The current count is: {count}"
         }
     }
 }
 ```
+
+### How to call a handler
+```rust
+my_handler.clone().call();
+```
+
 > :::info you can add multiple decedents by separating them via `,` like: @var1, var2, var3
 
 > :::info `fn() {}` is a part of the OSUI macro `rsx!`. In rust you would normally use `|| {}`

docs/references/f_element.md

@@ -2,7 +2,9 @@
 title: Element
 ---
 
-`Element` is a type alias of `Box<dyn ElementWidget>`. It makes the code look cleaner
+A element is a very important part of a UI library, It's what makes it possible.
+
+`Element` is a type alias of `Box<dyn ElementWidget>`. It makes the code look cleaner.
 
 # ElementWidget
 `ElementWidget` is a trait that defines the Elements and it's rendering / event updates.
@@ -16,6 +18,10 @@ title: Element
 - **optional**
 - This function updates the element when there is a event
 
+### `event(&mut self, document: &mut Document)`
+- **optional**
+- This function runs when the app first runs. It helps with element initialization after the `rsx!` stage.
+
 
 # ElementCore
 `ElementCore` is a trait that will automatically be implemented by the `osui_element::element` proc-macro. All of it's functions are used by OSUI.