--- title: "zenit — framework d’UI de bureau natif GPU pour Zig" description: "zenit est un framework d’UI de bureau natif GPU pour Zig : rendu Metal, Signals à grain fin, texte Unicode complet et IME, 51 composants et un harness E2E." url: https://zenit.z.express/fr language: fr 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_de: https://zenit.z.express/de.md project: zenit v0.1.0-alpha (Zig 0.15.2, macOS) source: https://github.com/version-next/zenit --- [v0.1.0-alphaPas encore de version stable](https://zenit.z.express/fr#status)macOS ·[Zig 0.15.2](https://ziglang.org) AI SkillApprenez zenit à votre agent # Développez comme sur le web. Rendu sur le GPU Un framework d’UI GPU haute performance pour Zig. Signals, recettes de style, flex / grid et DevTools se manient comme sur le web ; le rendu Metal et une chaîne texte et IME complète livrent une app native : une Hello Button.app en ReleaseSmall pèse 1.7 MB. [Démarrer en 5 minutes](https://zenit.z.express/fr/docs/guide/getting-started) [Video](https://zenit.z.express/media/film/zenit-film-4k.mp4?v=74579aad19) 01 / SIGNALSDes Signals, pas un DOM virtuel.0:00 / 1:53 HELLO, ZENIT ## Un fichier. Une fenêtre native. Le source complet de examples/hello\_button/main.zig, et la .app qu’il produit. Les images de la fenêtre sont enregistrées par le harness E2E, qui clique trois fois sur le bouton dans la vraie fenêtre. 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) Fenêtre 640 × 480 · Metal .app 1.7 MB · ReleaseSmall Enregistré par E2E harness /01 1.7MB Hello Button .app (ReleaseSmall) /02 51 Stories de composants enregistrées /03 2,026 Icônes Lucide incluses /04 60fps Objectif d’interaction en Debug AI SKILL · POUR CLAUDE CODE / TOUT AGENT ## Apprenez à votre agent à écrire du vrai UI zenit. zenit-ui-dev est une Agent Skill tirée du framework zenit lui-même et de l’historique d’un éditeur macOS en production construit avec : choix des composants, les trois couches de style, Signals, intégration native, autovérification par captures d’écran, et des dizaines d’entrées piège → cause → correctif. Déposez-la dans ~/.claude/skills et votre agent la charge dès qu’il écrit du code zenit. [Télécharger la Skill.zip · 54 KB](https://zenit.z.express/downloads/zenit-ui-dev.zip)[Guide d’installation](https://zenit.z.express/fr/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 Décompresser dans ```zig ~/.claude/skills/zenit-ui-dev/ ``` [Pencilpen.dev](https://www.pen.dev/) WORKFLOW RECOMMANDÉ · PENCIL + SKILL Associez-la à Pencil : concevez, puis construisez avec l’IA Nous recommandons de concevoir dans [Pencil](https://www.pen.dev/) et de laisser votre agent l’implémenter avec cette Skill. Le layout Flex, les espacements, les rayons, les tailles de texte et les icônes lucide d’un fichier .pen sont très proches du modèle de zenit ; la Skill inclut une table de correspondance des champs et un outil design\_diff pour que l’agent reproduise au chiffre près plutôt qu’à l’œil. [Découvrir Pencil](https://www.pen.dev/) [La boucle maquette → code](https://zenit.z.express/fr/docs/guide/ai-skill#pencil) 1. 01.penMaquette Pencil 2. 02MCPL’agent lit les valeurs exactes 3. 03zigCode zenit à partir de widgets + tokens 4. 04diffDiff numérique avec la maquette 01 / FONCTIONNALITÉS ## Natif de la fenêtre au pixel. Ni WebView ni DOM virtuel. L’arbre UI produit une liste plate de DisplayItem consommée directement par les renderers Metal. ### Rendu GPU Metal `render · gpu` Renderers SDF, texte et image en triple tampon ; l’achèvement GPU chevauche le layout CPU. LabelCount ← dirtyButtonBox ### Signals à grain fin `Signal · Memo · createEffect` Pas de reconstruction d’arbre, pas de diff. Une dépendance atteint exactement les nœuds qui la lisent. baselinex-height Aa字ع ### Texte et IME `text · text_core` Unicode 17, bidi UAX #9, limites de graphèmes UAX #29 et preedit / commit de bout en bout. Click megetByRole("button") ### E2E en vraie fenêtre `ui.devtools · harness` Localisateurs sémantiques, curseur virtuel, captures Retina et MP4 au niveau du drawable. DevTools inclus. 02 / COMPOSANTS ## 51 composants, chaque pixel sur le GPU. [Parcourir les composants](https://zenit.z.express/fr/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/fr/components) Pas une maquette : c’est la story Component Wall de Storybook, capturée depuis une vraie fenêtre par le harness E2E. Chaque tuile se clique, se remplit et défile. 03 / ARCHITECTURE ## Votre app importe deux modules. Plateforme, rendu et texte vivent en dessous. La frontière est imposée à la compilation : un import interdit ne compile pas. 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 L’objectif en Debug pour les interactions de base, y compris le défilement, le déplacement du curseur et la saisie dans des listes virtuelles de dizaines de milliers de lignes. Apple silicon série M. Instances en triple tampon ; la synchro de frame fait chevaucher GPU et layout CPU Display list avec cache de sous-arbres : les sous-arbres statiques sautent layout et rendu Les frontières `layout_isolation` coupent les cascades dirty Un ordonnanceur différé découpe les tâches lourdes sur plusieurs frames [Video](https://zenit.z.express/media/film/efficient.mp4?v=d765f1d5e1) Extrait du chapitre 08 du film : le survol et un spinner ne salissent que leur propre sous-arbre, le reste est rejoué depuis le cache ; quand rien ne change, la run loop dort — 0 frame, 0 travail GPU. Mesuré sur M4 Max · 5K · 60 Hz. 05 / QUICK START ## Trois étapes vers votre première fenêtre. Récupérer le modèle01 ```zig git clone https://github.com/version-next/zenit.git cp -R zenit/templates/minimal-app ./myapp ``` Fourni avec build.zig, build.zig.zon et src/main.zig. Brancher la dépendance02 ```zig zenit.attach(zenit_dep, exe); ``` Un seul appel branche ui, zenit\_app, les ponts natifs et les frameworks. Compiler et lancer03 ```zig zig build run zig build app ``` Lancez directement, ou produisez une .app macOS ouvrable d'un double-clic. 06 / STATUT ## Honnêtement, ce n’est pas encore prêt. 0.1.0 est la première version publique, mais l’API peut encore changer avant 1.0. Épinglez une version exacte ; chaque changement cassant est consigné dans MIGRATION. [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 — la seule plateforme testée en continu Pris en charge Linux · Windows Les backends sont des ébauches ; pas encore utilisables Prévu Accessibilité L'arbre a11y et le pont NSAccessibility existent, mais 0 composant sur 61 a passé la validation VoiceOver. Ne l'utilisez pas là où l'accessibilité est requise. Non pris en charge API publique Changements cassants permis avant 1.0, chacun consigné dans MIGRATION ; figée à la v1.0.0 pre-1.0 07 / EXEMPLES ## Voyez-le dans une vraie app. Des projets existants de la communauté, filmés dans de vraies fenêtres. [Voir les exemples](https://zenit.z.express/fr/showcase) [0:18CommunautéIDE de code (natif)Branché sur un vrai serveur de langage TypeScript : complétions à la frappe, aide aux signatures et documentation au survol. La liste de complétion, les popovers, l'éditeur et la minimap sont tous dessinés par zenit sur le GPU.](https://zenit.z.express/fr/showcase#code-intelligence)[1:09CommunautéÉditeur Markdown WYSIWYGUn éditeur de documents natif complet : listes, check-lists, citations et numérotation multiniveau prennent forme à la frappe, et tableaux, diagrammes de flux, blocs de code et captures d'écran cohabitent dans le même document. Ni Electron ni WebView : chaque pixel est dessiné par zenit.](https://zenit.z.express/fr/showcase#ui-tour) [2:22CommunautéCours de synthèse et piano roll (natif)Apprenez la synthèse en concevant des sons : un cours intégré explique les filtres pas à pas, et chaque potentiomètre anime en direct la courbe du filtre, les enveloppes et le spectre. Composez ensuite le morceau dans un piano roll à 7 pistes : chaque note est jouée par le synthé de l’app. Cliquez pour regarder avec le son.](https://zenit.z.express/fr/showcase#timbre) 08 / CONSTRUIT AVEC ZENIT ## Un framework ouvert. À votre idée. Des partenaires construisent déjà un outil de design à canevas infini, un IDE de code, un téléchargeur de vidéos… Un même ensemble de nœuds, de styles et de capacités natives, pour des produits très différents. En développement chez un partenaire Outil de design à canevas infini Zoom, glisser et multisélection sur le GPU, avec une interface en verre liquide flottant au-dessus du canevas. GPU canvasGlassBoxmagnify En développement chez un partenaire IDE d’édition de code Gros fichiers virtualisés, chaîne IME complète, palettes multi-fenêtres et menus natifs. VirtualListIMEmulti-window En développement chez un partenaire Téléchargeur de vidéos Tâches en arrière-plan avec progression en direct, et fichiers terminés glissés directement dans le Finder. workersProgressdrag-out [La suite Votre idée Le framework est ouvert à tout. Commencez par une fenêtre et construisez l’app Mac que vous avez en tête. Commencer à construire](https://zenit.z.express/fr/docs/guide/getting-started) ## Commencez par une fenêtre. [Lire le démarrage rapide](https://zenit.z.express/fr/docs/guide/getting-started) [Manuel du développeur](https://zenit.z.express/fr/docs)[Skill de dev IA](https://zenit.z.express/fr/docs/guide/ai-skill) [GitHub](https://github.com/version-next/zenit) OPEN SOURCE · ON RECRUTE ### Obsédé par la performance et le mouvement des UI ? Rejoignez-nous. Designer ou développeur : si une frame perdue, un curseur en retard d’un tick ou une courbe d’easing qui sonne faux vous dérangent, c’est vous que nous cherchons. Aidez-nous à faire de zenit le framework d’UI natif GPU le plus apprécié, avec la meilleure DX et les meilleures performances. DesignersVisuels des composants, courbes d’animation, détails d’interaction DéveloppeursRendu, layout, moteur de texte et performances [Rejoindre sur GitHub](https://github.com/version-next/zenit)[Guide de contribution](https://github.com/version-next/zenit/blob/HEAD/CONTRIBUTING.md)