Your first app, in Rust

use blenderui::prelude::*;

struct Hello;

impl Render for Hello {
    fn render(&mut self, _: &mut Window, _: &mut Context<Self>) -> impl IntoElement {
        rsx! {
            <body m-0 p-6 min-h-screen flex flex-col gap-4 bg-zinc-900 text-white>
                <h1 text-2xl font-bold>"Hello, BUI"</h1>
            </body>
        }
    }
}

fn main() {
    Application::new().run(|cx| {
        let opts = WindowOptions {
            window_bounds: Some(WindowBounds::Windowed(Bounds {
                origin: point(px(0.0), px(0.0)),
                size: size(px(420.0), px(260.0)),
            })),
            ..Default::default()
        };
        cx.open_window(opts, |_, cx| cx.new(|_| Hello)).unwrap();
    });
}

• rsx! is HTML-like markup. The macro turns it into ordinary Rust calls at compile time, so there’s no parsing at run time.
• The bare words on each tag, like p-6, flex and bg-zinc-900, are Tailwind classes written as attributes: short names for one style each (p-6 is padding, bg-zinc-900 a dark gray background). A typo such as bg-zinc-90O is a compile error that suggests the right name.
• Text goes in quotes: "Hello, BUI".

use blenderui::prelude::*;

struct Hello;

impl Render for Hello {
    fn render(&mut self, _: &mut Window, _: &mut Context<Self>) -> impl IntoElement {
        body().m_0().p_6().css("min-height", "100vh").flex().flex_col().gap_4()
            .bg(rgb(0x18181b)).text_color(white())
            .child(h1().text_2xl().font_bold().child("Hello, BUI"))
    }
}

fn main() {
    Application::new().run(|cx| {
        let opts = WindowOptions {
            window_bounds: Some(WindowBounds::Windowed(Bounds {
                origin: point(px(0.0), px(0.0)),
                size: size(px(420.0), px(260.0)),
            })),
            ..Default::default()
        };
        cx.open_window(opts, |_, cx| cx.new(|_| Hello)).unwrap();
    });
}

• Every HTML element has a constructor: body(), h1(), div(), span() and so on. They all return the same Div type.
• Each style is a method: .p_6() is padding, .flex().flex_col() stacks children in a column, .bg(rgb(0x18181b)) sets the background. For anything without a method, .css("property", "value") sets any CSS property.
• .child(...) adds a child: another element, or text.

Add a component above struct Hello:

#[component]
fn counter(label: &str) {
    let (count, set_count) = use_state(0);
    rsx! {
        <div flex items-center gap-3 p-4 rounded-xl bg-zinc-800>
            <span text-zinc-300>{label.to_string()} ": " {count().to_string()}</span>
            <div px-3 py-1 rounded-md bg-sky-700 hover:bg-sky-500 cursor-pointer
                 onClick={move || set_count(count() + 1)}>
                "Add one"
            </div>
        </div>
    }
}

• #[component] turns the function into a component you can use as a tag. Its parameters become props: label here.
• use_state(0) is a hook: it keeps a value between renders. It gives you a getter, count(), and a setter, set_count(...). Calling the setter re-renders the window.
• {...} in markup inserts a Rust value. Text children are String or &'static str, which is why label and the count go through .to_string().
• hover:bg-sky-500 changes the color while the pointer is over the element. onClick takes a closure, and you can leave out its parameters when you don’t need them.

Keep the count in the view itself. Give Hello a field, and start it at zero in main:

struct Hello { count: i32 }

// in main():
cx.open_window(opts, |_, cx| cx.new(|_| Hello { count: 0 })).unwrap();

Then build the counter in render. It needs the cx parameter now, so give it a name:

fn render(&mut self, _: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
    let counter = div().flex().items_center().gap_3().p_4().rounded_xl().bg(rgb(0x27272a))
        .child(span().text_color(rgb(0xd4d4d8)).child(format!("Clicks: {}", self.count)))
        .child(div().px_3().py_1().rounded_md().bg(rgb(0x0369a1))
            .hover(|s| s.bg(rgb(0x0ea5e9))).cursor_pointer()
            .child("Add one")
            .on_click(cx.listener(|this, _, _, cx| {
                this.count += 1;
                cx.notify();
            })));
    // ... the body from step 2, with `.child(counter)` after the heading
}

• The view’s fields are its state. self.count is read while rendering.
• cx.listener(...) wraps a closure so that, when it runs, it gets &mut access to your view (this). The other parameters are the event, the window and the context.
• cx.notify() tells BUI the view changed, so it renders again.
• .hover(|s| ...) takes the styles to apply while the pointer is over the element.

Put two lines under the heading in Hello’s markup:

<body m-0 p-6 min-h-screen flex flex-col gap-4 bg-zinc-900 text-white>
    <h1 text-2xl font-bold>"Hello, BUI"</h1>
    <counter label="Clicks" />
    <NumberSlider min={0.0} max={10.0} value="5" />   // a real Blender slider
</body>

• <counter label="Clicks" /> uses your component. Lowercase and uppercase component names both work.
• min={0.0} passes a Rust value; value="5" sets an HTML attribute.

Add two children after the heading:

body().m_0().p_6().css("min-height", "100vh").flex().flex_col().gap_4()
    .bg(rgb(0x18181b)).text_color(white())
    .child(h1().text_2xl().font_bold().child("Hello, BUI"))
    .child(counter)
    .child(NumberSlider().min(0.0).max(10.0).value("5"))   // a real Blender slider

• Blender components are functions with capitalized names, like NumberSlider(), and take the same methods as any element.