Live preview

How a Slint snippet in these docs becomes a component running in your browser.

Every snippet in these docs marked slint live is compiled twice: once by Glint’s Rust test suite, and once by the Slint WASM interpreter running in your browser. Both compile the same text against the same library sources, so a preview here is evidence that the snippet works — not a screenshot of a version that once did.

The preview below starts on its own when it scrolls into view. Nothing to click, and a page you never scroll to the bottom of never pays for it.

import { Button, ButtonVariant } from "@glint/components/button.slint";
import { Tokens } from "@glint/theme/tokens.slint";

export component Demo inherits Window {
    width: 420px;
    height: 96px;
    background: Tokens.color-background;

    HorizontalLayout {
        alignment: center;
        spacing: 8px;
        padding: 16px;

        Button { text: "Default"; }
        Button { text: "Outline"; variant: ButtonVariant.outline; }
        Button { text: "Ghost"; variant: ButtonVariant.ghost; }
    }
}

Imports are the ones you would write

A snippet imports Glint exactly as an app does, through the @glint library alias:

import { Button } from "@glint/components/button.slint";

There is no docs-only shim behind that path. The site serves the library’s own sources, so a snippet that stops compiling here is a snippet that would stop compiling in your project.

When a snippet does not compile

The compiler’s diagnostics are shown in the preview box, in place of the component. A broken preview says what broke, rather than leaving a blank rectangle for you to guess at.