Web のように作り、
GPU でネイティブ描画

高性能な Zig 向け GPU UI フレームワーク。Signal、スタイルレシピ、Flex / Grid、DevTools は Web のように書けて、Metal レンダリングと完全なテキスト・IME 処理でネイティブアプリとして動きます。ReleaseSmall でビルドした Hello Button.app はわずか 1.7 MB です。

5 分で始める
01 / SIGNALS仮想 DOM ではなく Signal。0:00 / 1:53
HELLO, ZENIT

ファイルひとつで、
ネイティブウィンドウひとつ。

examples/hello_button/main.zig の完全なソースと、それをコンパイルした .app。ウィンドウの映像は E2E harness が実際のウィンドウでボタンを 3 回クリックして録画したものです。

main.zigexamples/hello_button/
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
ウィンドウ
640 × 480 · Metal
.app
1.7 MB · ReleaseSmall
録画
E2E harness
/01
1.7MB
Hello Button .app のサイズ(ReleaseSmall)
/02
51
録画済みコンポーネント story
/03
2,026
同梱の Lucide アイコン
/04
60fps
Debug ビルドでの操作目標
AI SKILL · Claude Code / あらゆる Agent 向け

AI に書かせる、
本物の zenit UI。

zenit-ui-dev は、zenit フレームワーク自体と、zenit で作られた本番運用の macOS エディタの開発履歴から抽出した Agent Skill です。コンポーネント選定、スタイルの 3 層、Signal の使い方、ネイティブ統合、スクリーンショットによるセルフチェック、そして数十件の「落とし穴 → 原因 → 正しいやり方」を収録。~/.claude/skills に置けば、Agent が zenit コードを書くときに自動で読み込みます。

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
展開先
~/.claude/skills/zenit-ui-dev/
Pencilpen.dev
推奨ワークフロー · PENCIL + SKILL
Pencil と組み合わせて、デザインから AI で実装

Pencil で画面を描き、この Skill を使って Agent に実装させるのがおすすめです。.pen の Flex レイアウト、間隔、角丸、文字サイズ、lucide アイコンは zenit のモデルとよく似ています。Skill にはフィールド対応表と design_diff 比較ツールが付属しているので、Agent は感覚ではなく数値で再現できます。

  1. 01.penPencil のデザイン
  2. 02MCPAgent が正確な数値を読む
  3. 03zigwidgets + token で zenit コード
  4. 04diffデザインとの数値比較
01 / コア機能

ウィンドウからピクセルまで、
すべてネイティブ。

WebView も仮想 DOM もありません。UI ツリーはフラットな DisplayItem リストを出力し、Metal レンダラーがそれを直接処理します。

Metal GPU レンダリング

render · gpu

トリプルバッファの SDF・テキスト・画像レンダラー。GPU の処理完了と CPU のレイアウトが並行して進みます。

LabelCount ← dirtyButtonBox

きめ細かな Signal

Signal · Memo · createEffect

ツリーの再構築も diff もなし。依存関係はそれを読むノードだけに正確に届きます。

baselinex-height
Aa字ع

テキストと IME

text · text_core

Unicode 17、UAX #9 双方向テキスト、UAX #29 書記素境界、そしてエンドツーエンドの preedit / commit。

Click megetByRole("button")

実ウィンドウ E2E

ui.devtools · harness

セマンティックなロケーター、仮想カーソル、Retina スクリーンショット、drawable から直接の MP4 録画。DevTools も付属。

02 / コンポーネント

51 のコンポーネント、
すべてのピクセルを GPU で。

すべてのコンポーネントを見る
zenit components: buttons, inputs, select, switches, checkboxes, radios, slider, progress, tabs, calendar, steps, table, alerts, tags, badges, chips, timeline, tree, accordion, rate
これはデザインカンプではありません。Storybook の Component Wall story を、E2E harness が実際のウィンドウからキャプチャしたものです。どのタイルもクリック、入力、スクロールできます。
03 / アーキテクチャ

アプリが依存するのは
2 つの公開モジュールだけ。

プラットフォーム、レンダリング、テキストの詳細は下層が担います。境界はビルド時に強制され、禁止されたインポートはコンパイルエラーになります。

error:import of 'render' is forbidden from L0
your appL0
ui + zenit_apppublic · L1
system_sdkrendergputext
text_coreicon_ir
NSWindow · CAMetalLayer · CoreTextmacOS
04 / パフォーマンス
60fps
0 ms16.6 ms / frame1 s

Debug ビルドにおける基本操作の目標値です。数万行の仮想リストでのスクロール、カーソル移動、入力を含みます。M シリーズの Apple silicon で計測。

01トリプルバッファのインスタンスと frame sync で、GPU と CPU レイアウトを並行処理
02サブツリーキャッシュ付きのディスプレイリスト。静的なサブツリーはレイアウトと描画をスキップ
03layout_isolation 境界で dirty の連鎖を遮断
04遅延スケジューラーが重い処理を複数フレームに分割
映像の第 08 章より:ホバーとスピナーは自分のサブツリーだけを dirty にし、残りはキャッシュから再生。何も変わらなければ run loop はスリープし、0 フレーム・GPU 処理 0。M4 Max · 5K · 60 Hz で計測。
05 / QUICK START

3 ステップで、
最初のウィンドウへ。

テンプレートを取得01
git clone https://github.com/version-next/zenit.git
cp -R zenit/templates/minimal-app ./myapp

build.zig、build.zig.zon、src/main.zig を同梱しています。

依存関係を接続02
zenit.attach(zenit_dep, exe);

1 回の呼び出しで ui、zenit_app、ネイティブブリッジ、システムフレームワークを接続します。

ビルドして実行03
zig build run
zig build app

直接実行するか、ダブルクリックで起動できる macOS .app を生成します。

06 / 現状

正直に言うと、
まだ準備中です。

0.1.0 は最初の公開バージョンですが、1.0 までは API が変わる可能性があります。バージョンは厳密に固定してください。破壊的変更はすべて MIGRATION に記録しています。

macOS · Apple Silicon
NSWindow + Metal。継続的に検証している唯一のプラットフォーム
対応
Linux · Windows
バックエンドは仮実装のみで、まだ使えません
予定
アクセシビリティ
a11y ツリーと NSAccessibility ブリッジは実装済みですが、61 コンポーネント中 0 個しか VoiceOver の受け入れ検証を通過していません。アクセシビリティが必要な製品には使わないでください。
非対応
公開 API
1.0 までは破壊的変更あり。すべて MIGRATION に記録し、v1.0.0 で凍結
pre-1.0
07 / 事例

実際のアプリで
動く姿を見る。

コミュニティの既存事例を、実際のウィンドウでそのまま録画。

すべての事例を見る
08 / ZENIT で開発中

可能性は無限大、
次はあなたのアイデア。

すでにパートナーが zenit で無限キャンバスのデザインツール、コードエディタ IDE、動画ダウンローダーなどを開発しています。同じノード、スタイル、ネイティブ機能が、まったく異なる製品を支えています。

パートナーが開発中
無限キャンバスのデザインツール

ズーム、ドラッグ、複数選択はすべて GPU 上で動作し、リキッドグラスのパネルがキャンバスの上に浮かびます。

GPU canvasGlassBoxmagnify
パートナーが開発中
コードエディタ IDE

大きなファイルの仮想スクロール、完全な IME 処理、マルチウィンドウのコマンドパレット、ネイティブメニュー。

VirtualListIMEmulti-window
パートナーが開発中
動画ダウンローダー

バックグラウンドのジョブと進捗表示。完了したファイルはそのまま Finder にドラッグできます。

workersProgressdrag-out
次は
あなたのアイデア

フレームワークの可能性は無限です。ウィンドウひとつから始めて、思い描く Mac アプリを作りましょう。

作り始める
オープンソース · 仲間募集中

UI のパフォーマンスと
モーションを突き詰めたい?
一緒にやりましょう。

デザイナーでも開発者でも、1 フレームの落ち、1 ティック遅れるキャレット、しっくりこないイージングカーブが気になって仕方ない人こそ、私たちが探している仲間です。zenit を、最高の開発体験(DX)とパフォーマンスを備えた、最も愛される GPU ネイティブ UI フレームワークに一緒に磨き上げましょう。

デザイナーコンポーネントのビジュアル、モーションカーブ、インタラクションの細部
開発者レンダリング、レイアウト、テキストエンジン、パフォーマンス