Browser look, styled and Blender components

Some apps should look like a web page. Some should look like Blender. Most want a bit of both: a clean document with a few Blender sliders in it. In BUI you choose the look per element, and the choice flows down to everything inside.

The three looks

1. Plain HTML looks like a browser draws it: black text on white, 16 px, #0000ee underlined links, and a web browser’s form controls, all in Blender’s UI font, Inter.
2. Inside styled, an element and everything in it get Blender’s look: the #303030 background, #e6e6e6 13 px text, blue links, dark code and pre, themed tables, fieldsets and dialogs, and Blender’s widgets for the form controls.
3. Blender components (Button, NumberSlider, ColorSwatch …) are Blender’s widgets always, inside styled or not.

Here’s how forms.rs builds the screenshot above. One function makes the controls; the page shows it twice and then adds the components. The example is written with gpui builders; the rsx! tab is the same window in markup.

use blenderui::prelude::*;

fn controls() -> impl IntoElement {
    rsx! {
        <div flex gap-2 items-center p-3>
            <button>"Button"</button>
            <input value="Text field" />
            <input type="number" value="42" />
            <input type="range" min={0.0} max={10.0} value="6" />
        </div>
    }
}

struct Forms;

impl Render for Forms {
    fn render(&mut self, _: &mut Window, _: &mut Context<Self>) -> impl IntoElement {
        rsx! {
            <body m-0 flex flex-col>
                <h3>"Plain HTML (browser look)"</h3>
                {controls()}
                <div styled>
                    <h3>"Inside styled (Blender look)"</h3>
                    {controls()}
                </div>
                <h3>"Blender components"</h3>
                <div flex gap-2 p-3>
                    <Button>"Button"</Button>
                    <TextField value="Text" />
                    <NumberSlider min={0.0} max={10.0} value="6" />
                    <Checkbox checked={true} />
                </div>
            </body>
        }
    }
}

fn main() {
    Application::new().run(|cx| {
        cx.open_window(WindowOptions::default(), |_, cx| cx.new(|_| Forms)).unwrap();
    });
}

use blenderui::prelude::*;

fn controls() -> Div {
    div().flex().gap_2().items_center().p_3()
        .child(button().child("Button"))
        .child(input().value("Text field"))
        .child(input().input_type("number").value("42"))
        .child(input().input_type("range").min(0.0).max(10.0).value("6"))
}

struct Forms;

impl Render for Forms {
    fn render(&mut self, _: &mut Window, _: &mut Context<Self>) -> impl IntoElement {
        body().m_0().flex().flex_col()
            .child(h3().child("Plain HTML (browser look)"))
            .child(controls())
            .child(div().styled().child(h3().child("Inside styled (Blender look)")).child(controls()))
            .child(h3().child("Blender components"))
            .child(div().flex().gap_2().p_3()
                .child(Button().child("Button"))
                .child(TextField().value("Text"))
                .child(NumberSlider().min(0.0).max(10.0).value("6"))
                .child(Checkbox().checked(true)))
    }
}

fn main() {
    Application::new().run(|cx| {
        cx.open_window(WindowOptions::default(), |_, cx| cx.new(|_| Forms)).unwrap();
    });
}

Blender’s look with styled

Mark an element styled and it, and everything inside it, switches to Blender’s built-in stylesheet:

rsx! { <div styled class="p-4">"Blender look"</div> }
rsx! { <div styled><div styled="false">"Browser look again"</div></div> } // opt a subtree back out

div().styled().p_4().child("Blender look")
div().styled().child(div().attr("styled", "false").child("Browser look again")) // opt a subtree back out

• Your own CSS still wins over either set of defaults. styled only swaps the user-agent stylesheet underneath.
• styled="false" turns it back off for a subtree.
• What changes: besides the background, text color and size, styled gives pre a dark padded block, blockquote a blue left bar, kbd a border, mark Blender’s orange, thead a darker row, fieldset and dialog Blender’s greys and rounded corners, and hr a thin grey line.

Want the whole window in Blender’s look? Put styled on the root element, as the showcase example does with html().styled().

Blender components

These ten components are Blender’s widgets, wherever you put them:

Each one is the element it stands for, so every element method and attribute works on it: min, max, step, value, checked, placeholder, disabled, on_change, on_click, styling and so on.

rsx! {
    <NumberSlider min={0.0} max={10.0} value="2.5" onChange={|e: &ChangeEvent| println!("{:?}", e.number)} />
    <Button onClick={|| println!("apply")}>"Apply"</Button>
    <Dropdown><option>"Cube"</option><option>"Sphere"</option></Dropdown>
}

div()
    .child(NumberSlider().min(0.0).max(10.0).value("2.5")
        .on_change(|e: &ChangeEvent, _, _| println!("{:?}", e.number)))
    .child(Button().child("Apply").on_click(|_, _, _| println!("apply")))
    .child(Dropdown().child(option().child("Cube")).child(option().child("Sphere")))

Form controls

Outside styled, form elements look and behave like a web browser’s: its colors and shapes, typed number fields with spin buttons, a range thumb that jumps to the click. Inside styled, and as Blender components, they’re Blender’s widgets with Blender’s interaction rules: drag a number to change it, double-click to type (number fields also take math such as 2*pi), Ctrl+Z to undo, Esc to cancel.

Reading and controlling values

on_input and on_change both fire when the value changes. Each gets a ChangeEvent { value, checked, number }:

rsx! {
    <input id="vol" type="range" min={0.0} max={100.0} value={format!("{}", self.volume)}
           onInput={cx.listener(|this, e: &ChangeEvent, _, cx| {
               this.volume = e.number;
               cx.notify();
           })} />
}

input().id("vol").input_type("range").min(0.0).max(100.0)
    .value(format!("{}", self.volume))
    .on_input(cx.listener(|this, e: &ChangeEvent, _, cx| {
        this.volume = e.number;
        cx.notify();
    }))

• Values you pass are pushed to the widget only when they change between renders. A field the user is typing in isn’t reset under their fingers.
• To control a field, keep its value in your state and update it from on_change, as above. Give it an .id(...) so it keeps its identity across renders.
• A button() holding elements other than text is laid out as an ordinary box (style it with CSS) and still gets on_click.

Next steps