Metal GPU レンダリング
render · gpuトリプルバッファの SDF・テキスト・画像レンダラー。GPU の処理完了と CPU のレイアウトが並行して進みます。
高性能な Zig 向け GPU UI フレームワーク。Signal、スタイルレシピ、Flex / Grid、DevTools は Web のように書けて、Metal レンダリングと完全なテキスト・IME 処理でネイティブアプリとして動きます。ReleaseSmall でビルドした Hello Button.app はわずか 1.7 MB です。
examples/hello_button/main.zig の完全なソースと、それをコンパイルした .app。ウィンドウの映像は E2E harness が実際のウィンドウでボタンを 3 回クリックして録画したものです。
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 は、zenit フレームワーク自体と、zenit で作られた本番運用の macOS エディタの開発履歴から抽出した Agent Skill です。コンポーネント選定、スタイルの 3 層、Signal の使い方、ネイティブ統合、スクリーンショットによるセルフチェック、そして数十件の「落とし穴 → 原因 → 正しいやり方」を収録。~/.claude/skills に置けば、Agent が zenit コードを書くときに自動で読み込みます。
~/.claude/skills/zenit-ui-dev/
Pencilpen.devPencil で画面を描き、この Skill を使って Agent に実装させるのがおすすめです。.pen の Flex レイアウト、間隔、角丸、文字サイズ、lucide アイコンは zenit のモデルとよく似ています。Skill にはフィールド対応表と design_diff 比較ツールが付属しているので、Agent は感覚ではなく数値で再現できます。
WebView も仮想 DOM もありません。UI ツリーはフラットな DisplayItem リストを出力し、Metal レンダラーがそれを直接処理します。
render · gpuトリプルバッファの SDF・テキスト・画像レンダラー。GPU の処理完了と CPU のレイアウトが並行して進みます。
Signal · Memo · createEffectツリーの再構築も diff もなし。依存関係はそれを読むノードだけに正確に届きます。
text · text_coreUnicode 17、UAX #9 双方向テキスト、UAX #29 書記素境界、そしてエンドツーエンドの preedit / commit。
ui.devtools · harnessセマンティックなロケーター、仮想カーソル、Retina スクリーンショット、drawable から直接の MP4 録画。DevTools も付属。

プラットフォーム、レンダリング、テキストの詳細は下層が担います。境界はビルド時に強制され、禁止されたインポートはコンパイルエラーになります。
Debug ビルドにおける基本操作の目標値です。数万行の仮想リストでのスクロール、カーソル移動、入力を含みます。M シリーズの Apple silicon で計測。
layout_isolation 境界で dirty の連鎖を遮断git clone https://github.com/version-next/zenit.git cp -R zenit/templates/minimal-app ./myapp
build.zig、build.zig.zon、src/main.zig を同梱しています。
zenit.attach(zenit_dep, exe);
1 回の呼び出しで ui、zenit_app、ネイティブブリッジ、システムフレームワークを接続します。
zig build run zig build app
直接実行するか、ダブルクリックで起動できる macOS .app を生成します。
0.1.0 は最初の公開バージョンですが、1.0 までは API が変わる可能性があります。バージョンは厳密に固定してください。破壊的変更はすべて MIGRATION に記録しています。
コミュニティの既存事例を、実際のウィンドウでそのまま録画。
0:18コミュニティコード IDE(ネイティブ)本物の TypeScript 言語サーバーに接続:入力中の補完、シグネチャヘルプ、ホバードキュメント。補完リスト、ポップオーバー、エディタ、ミニマップはすべて zenit が GPU 上で描画しています。
1:09コミュニティWYSIWYG Markdown エディタ完全なネイティブ文書エディタ:リスト、チェックリスト、引用、多階層の番号付けが入力と同時に整形され、表、フローチャート、コードブロック、スクリーンショットがすべて同じ文書に共存します。Electron も WebView もなく、すべてのピクセルを zenit が描画します。
2:22コミュニティシンセ講座とピアノロール(ネイティブ)音色を作りながらシンセシスを学べます。内蔵の講座がフィルターを一歩ずつ解説し、どのノブもフィルターカーブ、エンベロープ、スペクトルをリアルタイムに動かします。続いて 7 トラックのピアノロールで曲を仕上げます。すべての音はアプリ自身のシンセが鳴らしています。クリックすると音声付きで再生します。すでにパートナーが zenit で無限キャンバスのデザインツール、コードエディタ IDE、動画ダウンローダーなどを開発しています。同じノード、スタイル、ネイティブ機能が、まったく異なる製品を支えています。
ズーム、ドラッグ、複数選択はすべて GPU 上で動作し、リキッドグラスのパネルがキャンバスの上に浮かびます。
大きなファイルの仮想スクロール、完全な IME 処理、マルチウィンドウのコマンドパレット、ネイティブメニュー。
バックグラウンドのジョブと進捗表示。完了したファイルはそのまま Finder にドラッグできます。
フレームワークの可能性は無限です。ウィンドウひとつから始めて、思い描く Mac アプリを作りましょう。
作り始めるデザイナーでも開発者でも、1 フレームの落ち、1 ティック遅れるキャレット、しっくりこないイージングカーブが気になって仕方ない人こそ、私たちが探している仲間です。zenit を、最高の開発体験(DX)とパフォーマンスを備えた、最も愛される GPU ネイティブ UI フレームワークに一緒に磨き上げましょう。