Ein hochperformantes GPU-UI-Framework für Zig. Signals, Style-Rezepte, Flex / Grid und DevTools fühlen sich an wie im Web; Metal-Rendering und ein vollständiger Text- und IME-Pfad liefern eine native App – eine Hello Button.app mit ReleaseSmall ist 1.7 MB groß.

In 5 Minuten starten
01 / SIGNALSSignals statt virtuellem DOM.0:00 / 1:53
HELLO, ZENIT

Eine Datei.
Ein natives Fenster.

Der vollständige Quelltext von examples/hello_button/main.zig und die daraus kompilierte .app. Die Fensteraufnahme stammt vom E2E-Harness, der im echten Fenster dreimal auf den Button klickt.

main.zigexamples/hello_button/
const std = @import("std");const ui = @import("ui");const App = @import("zenit_app").App; /// 样式表:具名纯函数 + 应用层自定义 recipe,与业务逻辑分离。const S = @import("styles.zig"); const Counter = struct {    n: u32 = 0,    label: ?*ui.Node = null,    buf: [32]u8 = undefined,     pub fn increment(self: *Counter) void {        self.n += 1;        const node = self.label orelse return;        const content = std.fmt.bufPrint(&self.buf, "Clicked {d} times", .{self.n}) catch return;        if (node.getText()) |old| {            var t = old;            t.content = content;            node.setText(t);        }        node.markRenderDirty();    }}; fn mountUI(cx: *ui.Cx, scope: *ui.Scope) anyerror!*ui.Node {    const allocator = cx.allocator;     const counter = try cx.bindState(Counter, .{});    const click = cx.on(Counter, counter, Counter.increment);     const root = try ui.boxStyled(cx, S.root, .{});     try root.appendChild(allocator, try ui.textStyled(cx, S.title, "Hello, zenit!"));     try root.appendChild(allocator, try ui.widgets.Button(.{        .label = "Click me",        .variant = .primary,        .size = .md,        .on_click = click,    }).mount(scope, cx));     // 应用层自定义 recipe(styles.zig 的 PanelRecipe)包住计数文本    const panel = try ui.boxStyled(cx, S.panel(.highlight), .{});    const label = try ui.textStyled(cx, S.counterLabel, "Clicked 0 times");    try panel.appendChild(allocator, label);    try root.appendChild(allocator, panel);    counter.label = label;     return root;} pub fn main() !void {    var gpa = std.heap.GeneralPurposeAllocator(.{}){};    defer _ = gpa.deinit();     const app = try App.init(gpa.allocator(), .{        .window = .{ .width = 640, .height = 480, .title = "Hello Button" },    });    defer app.deinit();     try app.runWith(mountUI);}
Hello Button
Fenster
640 × 480 · Metal
.app
1.7 MB · ReleaseSmall
Aufgenommen mit
E2E harness
/01
1.7MB
Hello Button .app (ReleaseSmall)
/02
51
Aufgenommene Komponenten-Stories
/03
2,026
Mitgelieferte Lucide-Icons
/04
60fps
Interaktionsziel im Debug-Build
AI SKILL · FÜR CLAUDE CODE / JEDEN AGENTEN

Bringen Sie Ihrem Agenten
echtes zenit-UI bei.

zenit-ui-dev ist ein Agent Skill, destilliert aus dem zenit-Framework selbst und der Entwicklungsgeschichte eines produktiven macOS-Editors, der darauf aufbaut: Komponentenwahl, die drei Styling-Ebenen, Signals, native Integration, Selbstprüfung per Screenshot und Dutzende Einträge nach dem Muster Falle → Ursache → Lösung. Legen Sie ihn in ~/.claude/skills ab, und Ihr Agent lädt ihn, sobald er zenit-Code schreibt.

zenit-ui-dev/
SKILL.md9.6 KB
references/
app-architecture.md7.2 KB
components.md8.3 KB
macos-native.md8.2 KB
pencil-design.md7.9 KB
performance.md4.1 KB
pitfalls.md8.5 KB
project-setup.md8.1 KB
state-reactivity.md7.8 KB
styling.md5.8 KB
ui-tree-layout.md6.1 KB
verification.md5.7 KB
tools/
design_diff.ts20.6 KB
png.ts3.6 KB
shot.ts3.7 KB
Entpacken nach
~/.claude/skills/zenit-ui-dev/
Pencilpen.dev
EMPFOHLENER WORKFLOW · PENCIL + SKILL
Kombiniert mit Pencil: entwerfen, dann mit KI bauen

Wir empfehlen, in Pencil zu entwerfen und den Agenten mit diesem Skill bauen zu lassen. Flex-Layout, Abstände, Radien, Schriftgrößen und lucide-Icons einer .pen-Datei liegen nah am Modell von zenit; der Skill enthält eine Feldzuordnung und ein design_diff-Tool, damit der Agent nach Zahlen statt nach Augenmaß umsetzt.

  1. 01.penPencil-Entwurf
  2. 02MCPAgent liest exakte Werte
  3. 03zigzenit-Code aus Widgets + Tokens
  4. 04diffNumerischer Abgleich mit dem Entwurf
01 / FÄHIGKEITEN

Nativ vom
Fenster bis zum Pixel.

Kein WebView, kein virtuelles DOM. Der UI-Baum erzeugt eine flache DisplayItem-Liste, die die Metal-Renderer direkt verarbeiten.

Metal-GPU-Rendering

render · gpu

Dreifach gepufferte SDF-, Text- und Bild-Renderer; die GPU-Fertigstellung überlappt mit dem CPU-Layout.

LabelCount ← dirtyButtonBox

Feingranulare Signals

Signal · Memo · createEffect

Kein Neuaufbau des Baums, kein Diffing. Eine Abhängigkeit erreicht genau die Nodes, die sie lesen.

baselinex-height
Aa字ع

Text & IME

text · text_core

Unicode 17, UAX #9 Bidi, UAX #29 Graphemgrenzen und durchgängiges preedit / commit.

Click megetByRole("button")

E2E im echten Fenster

ui.devtools · harness

Semantische Locators, ein virtueller Cursor, Retina-Screenshots und MP4 direkt vom Drawable. DevTools inklusive.

02 / KOMPONENTEN

51 Komponenten,
jedes Pixel auf der GPU.

Alle Komponenten ansehen
zenit components: buttons, inputs, select, switches, checkboxes, radios, slider, progress, tabs, calendar, steps, table, alerts, tags, badges, chips, timeline, tree, accordion, rate
Kein Mockup: Das ist die Component-Wall-Story aus Storybook, vom E2E-Harness aus einem echten Fenster aufgenommen. Jede Kachel lässt sich anklicken, beschreiben und scrollen.
03 / ARCHITEKTUR

Ihre App importiert
zwei Module.

Plattform, Rendering und Text liegen darunter. Die Grenze wird beim Build erzwungen – ein verbotener Import kompiliert nicht.

error:import of 'render' is forbidden from L0
your appL0
ui + zenit_apppublic · L1
system_sdkrendergputext
text_coreicon_ir
NSWindow · CAMetalLayer · CoreTextmacOS
04 / PERFORMANCE
60fps
0 ms16.6 ms / frame1 s

Das Ziel im Debug-Build für grundlegende Interaktionen – einschließlich Scrollen, Cursorbewegung und Tippen in virtuellen Listen mit Zehntausenden Zeilen. Apple Silicon der M-Serie.

01Dreifach gepufferte Instanzen; Frame-Sync überlappt GPU und CPU-Layout
02Display List mit Subtree-Cache – statische Teilbäume überspringen Layout und Rendering
03layout_isolation-Grenzen stoppen Dirty-Kaskaden
04Ein verzögerter Scheduler verteilt schwere Arbeit auf mehrere Frames
Aus Kapitel 08 des Films: Hover und ein Spinner markieren nur ihren eigenen Teilbaum als dirty, der Rest wird aus dem Cache abgespielt; ändert sich nichts, schläft die Run Loop – 0 Frames, 0 GPU-Arbeit. Gemessen auf M4 Max · 5K · 60 Hz.
05 / QUICK START

Drei Schritte zu
Ihrem ersten Fenster.

Vorlage holen01
git clone https://github.com/version-next/zenit.git
cp -R zenit/templates/minimal-app ./myapp

Enthält build.zig, build.zig.zon und src/main.zig.

Abhängigkeit einbinden02
zenit.attach(zenit_dep, exe);

Ein Aufruf bindet ui, zenit_app, die nativen Bridges und Frameworks ein.

Bauen und starten03
zig build run
zig build app

Direkt starten oder eine per Doppelklick startbare macOS-.app erzeugen.

06 / STATUS

Ehrlich gesagt:
noch nicht fertig.

0.1.0 ist das erste öffentliche Release, aber die API kann sich vor 1.0 noch ändern. Pinnen Sie eine exakte Version; jeder Breaking Change ist in MIGRATION dokumentiert.

macOS · Apple Silicon
NSWindow + Metal – die einzige kontinuierlich getestete Plattform
Unterstützt
Linux · Windows
Backends sind nur Stubs; noch nicht nutzbar
Geplant
Barrierefreiheit
Der a11y-Baum und die NSAccessibility-Bridge existieren, aber 0 von 61 Komponenten haben die VoiceOver-Abnahme bestanden. Nicht einsetzen, wo Barrierefreiheit gefordert ist.
Nicht unterstützt
Öffentliche API
Breaking Changes vor 1.0 erlaubt, jeweils in MIGRATION dokumentiert; ab v1.0.0 eingefroren
pre-1.0
07 / BEISPIELE

Sehen Sie es in
einer echten App.

Bestehende Projekte aus der Community, in echten Fenstern aufgenommen.

Alle Beispiele ansehen
08 / GEBAUT MIT ZENIT

Ein offenes Framework.
Ihre Idee als Nächstes.

Partner bauen bereits ein Designtool mit unendlicher Leinwand, eine Code-Editor-IDE, einen Video-Downloader … Ein Satz Nodes, Styles und nativer Fähigkeiten trägt ganz unterschiedliche Produkte.

In Entwicklung bei einem Partner
Designtool mit unendlicher Leinwand

Zoomen, Ziehen und Mehrfachauswahl auf der GPU, mit Liquid-Glass-Panels über der Leinwand.

GPU canvasGlassBoxmagnify
In Entwicklung bei einem Partner
Code-Editor-IDE

Virtualisierte große Dateien, ein vollständiger IME-Pfad, Paletten über mehrere Fenster und native Menüs.

VirtualListIMEmulti-window
In Entwicklung bei einem Partner
Video-Downloader

Hintergrundjobs mit Live-Fortschritt, fertige Dateien direkt in den Finder ziehen.

workersProgressdrag-out
Als Nächstes
Ihre Idee

Das Framework ist offen für alles. Beginnen Sie mit einem Fenster und bauen Sie die Mac-App, die Ihnen vorschwebt.

Loslegen
OPEN SOURCE · WIR SUCHEN VERSTÄRKUNG

Besessen von UI-
Performance und Motion? Machen Sie mit.

Ob Designer oder Entwickler – wenn Sie ein verlorener Frame, ein um einen Tick verspäteter Cursor oder eine unstimmige Easing-Kurve stört, sind Sie genau die Person, die wir suchen. Helfen Sie uns, zenit zum beliebtesten GPU-nativen UI-Framework mit der besten DX und Performance zu machen.

DesignerKomponenten-Optik, Motion-Kurven, Interaktionsdetails
EntwicklerRendering, Layout, die Text-Engine und Performance