myzig

Each window shows one of two kinds of interface:

• Native UI, written in Zig alone and drawn by myzig: no HTML, no JavaScript, no webview. It has flexbox and grid layout, text in a glyph atlas, a full widget set, motion, shaders, accessibility, and views you can test without a window. It draws in one instanced draw call per frame with Metal on macOS, Direct3D 11 on Windows, OpenGL on Linux and WebGL 2 in browsers, and with myzig's own CPU renderer, which draws the same pixels, wherever there is no GPU.
• A web page in the system webview: WKWebView on macOS, WebKitGTK on Linux, WebView2 on Windows. The frontend calls Zig through a JavaScript client generated from your Zig types, with TypeScript declarations, typed events and channels.

Apps are single binaries. Nothing polls, so an idle app uses no CPU. The documentation covers all of it; it is also a VitePress site, which cd docs && npm install && npm run dev serves locally.

Get started

myzig was called nanoui. Its module, flags (--myzig-*), page runtime (window.myzig) and URL scheme (myzig://) are named after it now; the build still exports the module as nanoui too, for apps that import the old name.

git clone https://github.com/hunghg255/myzig
cd myzig
zig build run-gallery    # the native UI tour
zig build run-hello      # the webview example
zig build test           # unit and widget tests

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 WebKitGTK for pages) and nothing at build time; Windows apps need the WebView2 Runtime for pages.

To make an app of your own, build the CLI and run myzig init:

cd cli && zig build -Doptimize=ReleaseSmall   # cli/zig-out/bin/myzig
myzig init my-app                 # native UI; --template web for a page
cd my-app && myzig dev            # runs it, rebuilding as you edit
myzig build                       # the release and its packages

See Getting started, which also tours every example.

The loading gallery, ported from mygo's 6725e0d, shows all 29 loading.dev indicators in native UI. Run zig build run-loading; its reusable loading plugin also exposes duration, Ripple direction, Wave origin and Blocks sweep. zig build test-loading checks the plugin and gallery, animation, pause/resume and reduced motion offscreen.

Native UI

const Counter = struct {
    n: i64 = 0,

    fn view(s: *Counter, c: *ui.Context) void {
        const col = ui.div(c).column().sizeFull().center().gap(16);
        defer col.end();
        ui.textf(c, .{ .size = 56, .weight = .bold }, "{d}", .{s.n});
        if (ui.button(c, "Increment", .{ .variant = .primary }).clicked) s.n += 1;
    }
};

pub fn main(init: std.process.Init) !void {
    const app = try myzig.App.create(init, .{ .name = "Counter" });
    defer app.destroy();
    var state: Counter = .{};
    _ = try app.newWindow(.{ .title = "Counter", .content = .{ .view = .init(&state, Counter.view) } });
    try app.run();
}

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.

• Layout: rows, columns, cards and scroll views, with flexbox grow, shrink, absolute placement and maximum sizes, a CSS-like grid (ui.grid), and right to left.
• Elements: GPUI-style method chains, such as ui.div(c).row().gap(8).bg(...).
• Text: wrapping, monospace, weights and rich spans, with text that can be selected and copied like a terminal's; CoreText on macOS, myzig's own TrueType reader elsewhere.
• Controls: buttons, links, checkboxes, toggles, radios, segmented controls, ratings, sliders and range sliders, steppers, number inputs, meters, progress, spinners, text fields with IME support, search and token fields, comboboxes, calendars, date, time and color pickers, and forms with validation.
• Overlays: popovers, tooltips, dialogs, alerts, toasts, menus, context menus and selects.
• Structures: tabs, disclosures, accordions, splits, sidebars, toolbars, breadcrumbs, a virtualized list (ui.list), trees, outlines, sortable tables and grid views, a router, actions and focus groups.
• Editors: a text area on a rope, a code editor with syntax highlighting and find, a diff viewer, a rich text editor, and streaming Markdown.
• Drawing: pictures in an atlas, canvases of paths, SVG, charts, gradients, blur, backdrop effects, transforms, and shaders written once in ZSL and drawn by every renderer.
• Look and motion: light and dark themes that follow the system, named themes, springs, keyframes, timelines and layout transitions, and Gaussian shadows.
• Pointer: hover that follows ancestry as CSS's :hover does, double clicks, drag and drop, and pointer tracking for graphs (c.wants_moves).
• Accessibility: VoiceOver, AT-SPI (Orca) and UI Automation read the view; an inspector (F12 in debug builds) shows its boxes.

Web pages

const Greeter = struct {
    pub const myzig_params = .{ .greet = .{"name"} };

    pub fn greet(_: *Greeter, call: *myzig.Call, name: []const u8) ![]const u8 {
        return call.arena.print("Hello, {s}!", .{name});
    }
};

const Tick = myzig.Event("tick", struct { uptime: u64 });

// in main:
try app.bind(&greeter);
try app.registerEvent(Tick);
_ = try app.newWindow(.{ .title = "Hello", .content = .{ .page = .{ .url = "/", .assets = &assets } } });

import { Greeter, onTick } from "/myzig.js"; // generated, served by the app

document.body.textContent = await Greeter.greet("Ada");
onTick(({ uptime }) => console.log(uptime));

zig build gen writes myzig.d.ts:

This is the beginning of the README. Read the rest at the original. Read the full README ↗