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.8 KB
performance.md4.1 KB
pitfalls.md8.5 KB
project-setup.md8.0 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.5 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, senkt zenit die Bildrate so weit wie möglich. 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.

Wie zenit entsteht

Der Großteil von zenits Code, Dokumentation und Tests wird mit KI-Coding-Agents geschrieben. Architektur, Review und Abnahme übernimmt ein Mensch. Deshalb gilt „kompiliert und sieht richtig aus“ bei uns nicht als Beleg. Die CI führt rund 2.700 deterministische Tests aus, eine Allokationsfehler-Kampagne, die jede Allokation der Reihe nach fehlschlagen lässt, Tests auf einem echten Metal-Gerät, E2E-Tests in echten Fenstern mit Pixelvergleich sowie Prüfungen der Modulgrenzen. Wenn Sie einen Bug oder ein Designproblem finden, eröffnen Sie bitte ein Issue: Konkrete Berichte sind das Nützlichste, was Sie uns schicken können.

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 schneller und angenehmer in der Nutzung zu machen.

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