--- title: "zenit — GPU-natives Desktop-UI-Framework für Zig" description: "zenit ist ein GPU-natives Desktop-UI-Framework für Zig: Metal-Rendering, feingranulare Signals, vollständiger Unicode-Text und IME, 51 Komponenten und ein…" url: https://zenit.z.express/de language: de alternate_en: https://zenit.z.express/index.md alternate_zh: https://zenit.z.express/zh.md alternate_es: https://zenit.z.express/es.md alternate_ja: https://zenit.z.express/ja.md alternate_ko: https://zenit.z.express/ko.md alternate_fr: https://zenit.z.express/fr.md project: zenit v0.1.0-alpha (Zig 0.15.2, macOS) source: https://github.com/version-next/zenit --- [v0.1.0-alphaNoch kein stabiles Release](https://zenit.z.express/de#status)macOS ·[Zig 0.15.2](https://ziglang.org) AI SkillBringen Sie Ihrem Agenten zenit bei # Entwickeln wie im Web. Rendern auf der GPU 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](https://zenit.z.express/de/docs/guide/getting-started) [Video](https://zenit.z.express/media/film/zenit-film-4k.mp4?v=74579aad19) 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/ ```zig 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 [Video](https://zenit.z.express/media/hello-button.mp4?v=b4d2b8f8a0) 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. [Skill herunterladen.zip · 54 KB](https://zenit.z.express/downloads/zenit-ui-dev.zip)[Installationsanleitung](https://zenit.z.express/de/docs/guide/ai-skill) 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 ```zig ~/.claude/skills/zenit-ui-dev/ ``` [Pencilpen.dev](https://www.pen.dev/) EMPFOHLENER WORKFLOW · PENCIL + SKILL Kombiniert mit Pencil: entwerfen, dann mit KI bauen Wir empfehlen, in [Pencil](https://www.pen.dev/) 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. [Über Pencil](https://www.pen.dev/) [Vom Entwurf zum Code](https://zenit.z.express/de/docs/guide/ai-skill#pencil) 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](https://zenit.z.express/de/components) [![zenit components: buttons, inputs, select, switches, checkboxes, radios, slider, progress, tabs, calendar, steps, table, alerts, tags, badges, chips, timeline, tree, accordion, rate](https://zenit.z.express/media/component-wall.webp?v=7e700be72a)](https://zenit.z.express/de/components) 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. Dreifach gepufferte Instanzen; Frame-Sync überlappt GPU und CPU-Layout Display List mit Subtree-Cache – statische Teilbäume überspringen Layout und Rendering `layout_isolation`\-Grenzen stoppen Dirty-Kaskaden Ein verzögerter Scheduler verteilt schwere Arbeit auf mehrere Frames [Video](https://zenit.z.express/media/film/efficient.mp4?v=d765f1d5e1) 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 ```zig 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 ```zig zenit.attach(zenit_dep, exe); ``` Ein Aufruf bindet ui, zenit\_app, die nativen Bridges und Frameworks ein. Bauen und starten03 ```zig 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. [MIGRATION](https://github.com/version-next/zenit/blob/HEAD/docs/MIGRATION.md) [version-next/zenit](https://github.com/version-next/zenit) 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](https://zenit.z.express/de/showcase) [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.](https://zenit.z.express/de/showcase#code-intelligence)[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.](https://zenit.z.express/de/showcase#ui-tour) [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.](https://zenit.z.express/de/showcase#timbre) 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](https://zenit.z.express/de/docs/guide/getting-started) ## Beginnen Sie mit einem Fenster. [Schnellstart lesen](https://zenit.z.express/de/docs/guide/getting-started) [Entwicklerhandbuch](https://zenit.z.express/de/docs)[KI-Dev-Skill](https://zenit.z.express/de/docs/guide/ai-skill) [GitHub](https://github.com/version-next/zenit) 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 [Auf GitHub mitmachen](https://github.com/version-next/zenit)[Beitragsleitfaden](https://github.com/version-next/zenit/blob/HEAD/CONTRIBUTING.md)