--- 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://ui.surf/zenit/de language: de alternate_en: https://ui.surf/zenit/index.md alternate_zh: https://ui.surf/zenit/zh.md alternate_es: https://ui.surf/zenit/es.md alternate_ja: https://ui.surf/zenit/ja.md alternate_ko: https://ui.surf/zenit/ko.md alternate_fr: https://ui.surf/zenit/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://ui.surf/zenit/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://ui.surf/zenit/de/docs/guide/getting-started) [Video](https://ui.surf/zenit/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://ui.surf/zenit/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://ui.surf/zenit/downloads/zenit-ui-dev.zip)[Installationsanleitung](https://ui.surf/zenit/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.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 ```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://ui.surf/zenit/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://ui.surf/zenit/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://ui.surf/zenit/media/component-wall.webp?v=7e700be72a)](https://ui.surf/zenit/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://ui.surf/zenit/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, 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 ```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) ### 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](https://github.com/version-next/zenit/issues): 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](https://ui.surf/zenit/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://ui.surf/zenit/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://ui.surf/zenit/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://ui.surf/zenit/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://ui.surf/zenit/de/docs/guide/getting-started) ## Beginnen Sie mit einem Fenster. [Schnellstart lesen](https://ui.surf/zenit/de/docs/guide/getting-started) [Entwicklerhandbuch](https://ui.surf/zenit/de/docs)[KI-Dev-Skill](https://ui.surf/zenit/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 schneller und angenehmer in der Nutzung 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)