UI with Std.Ui

You drew the counter with Std.Ui, not raw HTML. That's the default in Sky, and it's worth knowing why.

Why Std.Ui over HTML

Std.Ui is a typed, no-CSS layout DSL. Three reasons it's the default:

• One view, three platforms. The same Element renders on the web (Sky.Live), in a terminal (Sky.Tui), and in a desktop window (Sky.Webview). Your view code is portable.
• It escapes everything. Text is HTML-escaped for you — there's no XSS footgun, and raw data-sky-eval is forbidden.
• You describe layout, not CSS. Rows, columns, spacing, and typed colours — no stylesheet to keep in sync.

Reach for Std.Html only to wrap raw markup Ui can't express.

Layout primitives

Everything is built from a few pieces:

import Std.Ui as Ui
import Std.Ui.Background as Background
import Std.Ui.Font as Font
import Std.Ui.Border as Border


card : Ui.Element msg
card =
    Ui.column
        [ Ui.spacing 12, Ui.padding 16, Background.color (Ui.rgb 246 246 240) ]
        [ Ui.el [ Font.size 20, Font.bold ] (Ui.text "Hello")
        , Ui.text "A column stacks its children vertically."
        , Ui.row [ Ui.spacing 8 ]
            [ Ui.text "a row"
            , Ui.text "lays them side by side"
            ]
        ]

• Ui.el is a single element, Ui.row lays children horizontally, Ui.column vertically, Ui.text is a text node.
• Ui.layout [] element wraps your top-level element into a page — every view ends with it (you saw this in the counter).

Typed attributes

Attributes are typed values from focused sub-modules, not CSS strings:

Ui.el
    [ Ui.padding 12
    , Ui.spacing 8
    , Background.color (Ui.rgb 37 99 235)
    , Font.color (Ui.rgb 255 255 255)
    , Font.size 16
    , Border.rounded 8
    ]
    (Ui.text "A styled box")

Common ones: Ui.padding / Ui.paddingXY / Ui.spacing, Ui.width / Ui.height with Ui.fill / Ui.px, Ui.centerX / Ui.centerY, Background.color, Font.size / Font.bold / Font.color, Border.rounded / Border.color. Colours come from Ui.rgb r g b.

Buttons

A button pairs a message with a label:

Ui.button
    [ Ui.padding 8, Border.rounded 6 ]
    { onPress = Just Save, label = Ui.text "Save" }

onPress is a Maybe msg — use Nothing to render a disabled-looking button that does nothing.

The full surface — grids, images, links, nearby overlays, media queries, pseudo-classes — is in the Std.Ui guide and the Std.Ui module reference.

Next → Forms & events