stew/* Packages / 14.6

✨ stew/ui

The stew/ui package provides tools for manipulating visual state and the DOM that do not directly fall under reactive content.

Title and Focus Manipulation

Dynamically update the browser tab title or manage accessibility by moving user focus.

<goscript client>
    import "stew/ui"

    updateTitle := func() {
        ui.Title("New Title — My App")
    }

    focusInput := func() {
        ui.Focus("#search-input")
    }
</goscript>

CSS Classes and Styles

While Stew encourages reactivity via Signals, it is sometimes simpler to directy manipulate classes for animations or ephemeral states.

<goscript client>
    import "stew/ui"

    toggleMenu := func() {
        ui.ToggleClass("#mobile-menu", "translate-x-0")
    }

    highlight := func() {
        ui.AddClass("#badge", "ring-2")
        ui.SetStyle("#badge", "backgroundColor", "#fbbf24")
    }
</goscript>

ui.AddClass(sel, class)

Adds a class safely.

ui.RemoveClass(sel, class)

Removes a specific class.

ui.ToggleClass(sel, class)

Toggles the class on/off.

ui.HasClass(sel, class)

Checks if a class exists.

Form & Element Values

Interact with standard input elements (input, textarea, select) directly.

<goscript client>
    import "stew/ui"

    onSearch := func() {
        query := ui.GetValue("#search-field")
        if query == "" {
             ui.Focus("#search-field")
             return
        }
        // ...
        ui.SetValue("#search-field", "") // Reset
    }
</goscript>

Scrolling

Use ScrollTo to visually navigate within the page. The second parameter enables smooth scrolling.

<goscript client>
    import "stew/ui"

    goToTop := func() {
        ui.ScrollTo("#header", true) // true = smooth
    }
</goscript>

💡 Direct Manipulation vs Reactivity

Always prefer Signals (stew/state) for the content of your tags. Use stew/ui for imperative interactions like focus, page title, or complex CSS animations.