Metal-GPU-Rendering
render · gpuDreifach gepufferte SDF-, Text- und Bild-Renderer; die GPU-Fertigstellung überlappt mit dem CPU-Layout.
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ß.
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.
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);}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.
~/.claude/skills/zenit-ui-dev/
Pencilpen.devWir 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.
Kein WebView, kein virtuelles DOM. Der UI-Baum erzeugt eine flache DisplayItem-Liste, die die Metal-Renderer direkt verarbeiten.
render · gpuDreifach gepufferte SDF-, Text- und Bild-Renderer; die GPU-Fertigstellung überlappt mit dem CPU-Layout.
Signal · Memo · createEffectKein Neuaufbau des Baums, kein Diffing. Eine Abhängigkeit erreicht genau die Nodes, die sie lesen.
text · text_coreUnicode 17, UAX #9 Bidi, UAX #29 Graphemgrenzen und durchgängiges preedit / commit.
ui.devtools · harnessSemantische Locators, ein virtueller Cursor, Retina-Screenshots und MP4 direkt vom Drawable. DevTools inklusive.

Plattform, Rendering und Text liegen darunter. Die Grenze wird beim Build erzwungen – ein verbotener Import kompiliert nicht.
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.
layout_isolation-Grenzen stoppen Dirty-Kaskadengit 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.
zenit.attach(zenit_dep, exe);
Ein Aufruf bindet ui, zenit_app, die nativen Bridges und Frameworks ein.
zig build run zig build app
Direkt starten oder eine per Doppelklick startbare macOS-.app erzeugen.
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.
Bestehende Projekte aus der Community, in echten Fenstern aufgenommen.
0:18CommunityCode-IDE (nativ)Angebunden an einen echten TypeScript-Language-Server: Vervollständigung beim Tippen, Signaturhilfe und Hover-Doku. Vervollständigungsliste, Popovers, Editor und Minimap zeichnet zenit komplett auf der GPU.
1:09CommunityWYSIWYG-Markdown-EditorEin vollständiger nativer Dokumenteditor: Listen, Checklisten, Zitate und mehrstufige Nummerierung entstehen beim Tippen, und Tabellen, Flussdiagramme, Codeblöcke und Screenshots leben im selben Dokument. Kein Electron, kein WebView – jedes Pixel zeichnet zenit.
2:22CommunitySynthese-Kurs & Piano-Roll (nativ)Synthese lernen, während Sie Klänge gestalten: Ein eingebauter Kurs erklärt Filter Schritt für Schritt, und jeder Regler bewegt Filterkurve, Hüllkurven und Spektrum live. Danach entsteht der Song in einer Piano-Roll mit 7 Spuren – jeder Ton kommt vom eigenen Synthesizer der App. Klicken Sie, um es mit Ton anzusehen.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.
Zoomen, Ziehen und Mehrfachauswahl auf der GPU, mit Liquid-Glass-Panels über der Leinwand.
Virtualisierte große Dateien, ein vollständiger IME-Pfad, Paletten über mehrere Fenster und native Menüs.
Hintergrundjobs mit Live-Fortschritt, fertige Dateien direkt in den Finder ziehen.
Das Framework ist offen für alles. Beginnen Sie mit einem Fenster und bauen Sie die Mac-App, die Ihnen vorschwebt.
LoslegenOb 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.