fenestra

A UI stack built for the agent loop. Describe a UI as JSON, render it natively, and check it in CI. There's no compile step in that loop, and no flaky screenshots.

fenestra is a pure-Rust GUI framework. Its headless renderer is deterministic, which means people and AI coding agents can both look at what they built and prove it is right. It also speaks A2UI, the open Agent-to-UI standard — this is its first native Rust renderer (fenestra-a2ui). The widget kit and design system below are what that loop can produce.

▶ Try the live demo — the dashboard and widget galleries, running in your browser over WebGPU. No DOM and no CSS: every pixel is vello on wgpu, from the same code as the native window. There's also the book if you want the guided tour.

Light	Dark

That hero shot is a real tool, not a mockup: examples/agent_dashboard.rs is a live dashboard over an AI coding session, with a virtualized feed, charts, and a live tail through the effect layer. The SaaS-style widget showcase lives on as examples/dashboard.rs:

Light	Dark

There's no browser here, no webview, and no HTML or CSS parser. fenestra draws everything itself with vello on wgpu. It lays out with taffy (flexbox and grid) and shapes text with parley.

On top of that sits a themed widget kit that looks like a polished modern web app: soft layered shadows, OKLCH color ramps, a real typographic hierarchy, transitions on hover and focus, and light and dark themes that both get first-class treatment.

Quickstart

use fenestra::prelude::*;

struct Counter { n: i64 }

#[derive(Clone)]
enum Msg { Inc, Dec }

impl App for Counter {
    type Msg = Msg;

    fn update(&mut self, msg: Msg) {
        match msg { Msg::Inc => self.n += 1, Msg::Dec => self.n -= 1 }
    }

    fn view(&self) -> Element<Msg> {
        col().p(SP6).gap(SP4).items_center().children([
            text(self.n.to_string()).size(TextSize::Xl2).weight(Weight::Semibold),
            row().gap(SP3).children([
                button("Decrement").variant(ButtonVariant::Secondary).on_click(Msg::Dec),
                button("Increment").on_click(Msg::Inc),
            ]),
        ])
    }
}

fn main() { fenestra::run(Counter { n: 0 }, WindowOptions::titled("Counter")) }

Run cargo add fenestra, paste that in, then cargo run. If you'd rather start from a template, cargo generate richer-richard/fenestra-template gives you one with a headless UI test and CI already set up.

The whole view is rebuilt, laid out and repainted on every redraw. There's no diffing and there are no macros, so everything autocompletes.

Agents can see what they build

Rendering (element tree, theme, size) to pixels is a pure function, and it runs without a window or display server:

use fenestra::shell::{SyntheticEvent, render_app, render_element};

// A picture of any element tree:
let image = render_element(my_view(), &Theme::dark(), (800, 600));
image.save("preview.png")?;

// Or drive a full app with scripted input and look at the result:
let image = render_app(
    &mut app,
    &[
        SyntheticEvent::MouseMove { x: 50.0, y: 34.0 },
        SyntheticEvent::MouseDown,
        SyntheticEvent::MouseUp,
        SyntheticEvent::Text("hello".into()),
    ],
    (800, 600),
    &Theme::light(),
);
assert_eq!(app.value, "hello");

Headless rendering is deterministic (embedded fonts, fixed scale, reduced motion), which makes pixel-exact golden tests practical — fenestra's own widget kit is tested this way, on CI, with no GPU display attached.

The same pipeline backs a JSON authoring format called fenestra/1, for agents and tools that would rather not compile Rust. You describe a UI in JSON and fenestra-describe parses it into the same Element tree the builders produce. The format covers the whole kit: data tables, trees, popovers, command palettes, the OKLCH color picker, images, charts, and markdown.

From there you have a few ways in. fenestra render writes a PNG. fenestra preview <file> opens a window that re-renders every time you save. And the fenestra-mcp server hands an agent the whole loop — render, query, interact, verify — as fourteen MCP tools, including render_a2ui. You can watch motion too, not just single frames: Harness::film (also fenestra film, also the MCP film_ui tool) captures a sequence with real motion turned on and composes it into one captioned filmstrip.

What a headless render does and doesn't cover. It renders a deliberate subset of what a live window shows. That subset is exactly what makes it deterministic, so it's worth knowing where the edges are.

Text uses the embedded fonts, so Latin comes out exact. The real monospace, CJK, emoji and RTL faces come from the OS, and those only show up in a real window. Motion is always forced to reduced. Pixels are referenced against macOS/Metal, with Linux/lavapipe allowed a wider tolerance. Scale isn't pinned — render_element_scaled runs the same two-pass pipeline at any device scale, so you can catch retina-only regressions like hairlines and blur radii headlessly as well.

Two things look different outside that path. The full Liquid-Glass optics (backdrop blur, edge lensing, adaptive vibrancy) only render in the headless golden path; a live single-pass window gives you the translucent tint plus the specular rim and sheen. On the web, copying out reaches the system clipboard but pasting in from other apps stays inside the app, glass matches the native live window, and AccessKit is still waiting on an upstream web adapter.

So headless is the right thing to trust for layout, semantics, color, and the large majority of pixels. Check non-Latin text, monospace, and full glass in a real window. ARCHITECTURE.md keeps the precise ledger.

Working with an AI agent? AGENTS.md is the manual for the build → render → look → verify loop (and llms.txt for context loaders).

Philosophy: web aesthetics without the web platform

The way the web looks — soft elevation, tinted neutrals, OKLCH ramps, spacing on a 4px grid, focus rings, easing in the 120–300ms range — is the best-tested visual language we have in software. The web platform is a heavy way to get hold of it.

So fenestra encodes that language as typed Rust values instead. A Theme is generated from a single accent hue. Spacing, radius, shadow and motion come from tokens. The builder vocabulary (row(), .p(SP4), .rounded(R_MD), .shadow(ShadowToken::Sm)) is small enough to memorize and regular enough that rust-analyzer — or a language model — can autocomplete it. Every widget routes every color through the theme, so flipping one Mode turns the whole app dark.

The kit

Every widget below ships in every state, in both themes.

Controls. Button, IconButton, Checkbox, Switch, Radio, Slider, SegmentedControl, Select, and a Color Picker with an OKLCH lightness×chroma pad, hue and alpha strips, and forgiving hex entry.

Text entry. TextInput (parley editing, clipboard, IME) and TextArea (multiline, auto-growing).

Surfaces and feedback. Tooltip, Modal (focus trap and backdrop), Toasts, Tabs, Card, StatCard, Badge, Avatar, StatusIndicator with a live pulse, Kbd key-caps, Skeleton loaders, Divider, Spinner, Table, Callout, and Progress — including a Material-3 Expressive wavy bar. Plus a vendored subset of Lucide icons.

Regenerate this corpus any time with cargo run --example gallery — it renders headlessly.

Motion

fenestra-motion renders frame-pure compositions headlessly, with no live window and no screen recorder involved. The same pipeline is what fenestra film and the MCP film_ui tool use to let an agent watch a transition play.

Below is a fenestra-charts bar chart, rebuilt every frame from rank-sorted, track-interpolated data: