justrach / nanoui

nanoui 
 Desktop apps in Zig, with native UI drawn on the GPU or a web frontend. 
 Meet Nano. Transparent PNG · Original paper illustration 
 Want to see it in use? nanoterm is a terminal with a coding agent, and nanomon an activity monitor, both built on nanoui. 
 Get started ·
 Native UI ·
 Web pages ·
 Testing ·
 Platforms ·
 Apps ·
 Performance ·
 Credits 
Each window shows one of two kinds of interface:
- **Native UI**, written in Zig alone and drawn by nanoui: no HTML, no
 JavaScript, no webview. It has flexbox layout, text in a glyph atlas,
 animations, and views you can test without a window. On macOS it draws with
 Metal and CoreText, in one instanced draw call per frame.
- **A web page** in the system webview (WKWebView, macOS for now). The
 frontend calls Zig through a JavaScript client generated from your Zig
 types, with TypeScript declarations.
Apps are single binaries. Nothing polls, so an idle app uses no CPU.
## Get started
 [code] 
You need Zig 0.17.0, plus the macOS SDK on a Mac (Xcode or the Command Line
Tools). Linux apps need GTK 3 at run time and nothing at build time.
`--recursive` also fetches the apps, which live in their own repositories as
submodules under `apps/`. To fetch them after a plain clone, run
`git submodule update --init`.
To use nanoui in your own project, add a release to its `build.zig.zon`:
 [code] 
Releases are tagged `vMAJOR.MINOR.PATCH`, as mygo's are, and each is listed
under Releases with what
changed. While nanoui is 0.x, a minor release may change the API; a patch
release won't.
## Native UI
 [code] 
 The gallery example, zig build run-gallery . 
Views are immediate mode: a function of your state, run on every event.
Widgets answer from the previous frame's layout. When an interaction changes
state, the frame is built again before it's drawn, so the screen never lags
the state.
 What's in the toolkit 
- **Layout:** rows, columns, cards and scroll views, with flexbox grow,
 shrink, absolute placement, and maximum sizes.
- **Elements:** GPUI-style method chains, such as
 `ui.div(c).row().gap(8).bg(...)`.
- **Lists:** a virtualized list (`ui.list`) that builds only the rows in view.
- **Text:** wrapping, monospace, weights and rich spans, with text that can
 be selected and copied like a terminal's.
- **Controls:** buttons, checkboxes, toggles, sliders, progress bars,
 segmented controls, badges, and text fields with IME support.
- **Images:** pictures decoded once and packed into an atlas.
- **Look:** light and dark themes that follow the system, eased animations,
 Gaussian shadows, and Liquid Glass.
- **Pointer:** hover that follows ancestry as CSS's `:hover` does, double
 clicks, and pointer tracking for graphs (`c.wants_moves`).
### Liquid Glass
`.glass(.{})` fills a box with Liquid Glass, the material of macOS 26 and
later, in place of a background. Whatever was painted under the box shows
through it: frosted, bent near its edges as through the rim of a lens, and
lit along a hairline rim. That i