Metal GPU 渲染Metal GPU rendering
render · gpu三缓冲的 SDF、文本与图片渲染器;GPU 完成与 CPU 布局重叠进行。Triple-buffered SDF, text and image renderers; GPU completion overlaps CPU layout.
高性能的 Zig GPU UI 框架。Signal、样式配方、Flex / Grid 和 DevTools,写起来像 Web;Metal 渲染、完整的文本与输入法,跑起来是原生应用——ReleaseSmall 打包的 Hello Button.app 只有 1.7 MB。A high-performance GPU UI framework for Zig. Signals, style recipes, flex / grid and DevTools feel like the web; Metal rendering and a complete text and IME path ship a native app — a ReleaseSmall Hello Button.app is 1.7 MB.
examples/hello_button/main.zig 的完整源码,和它编译出的 .app。窗口里的画面由 E2E harness 录制:在真实窗口里点了三次按钮。The complete source of examples/hello_button/main.zig, and the .app it compiles to. The window footage is recorded by the E2E harness, clicking the button three times in the real window.
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:组件选型、样式三层、Signal 用法、原生集成、截图自验,以及几十条“坑 → 原因 → 正确做法”。放进 ~/.claude/skills,Agent 写 zenit 代码时自动加载。zenit-ui-dev is an Agent Skill distilled from the zenit framework and from the history of a production macOS editor built on it: component choice, the three styling layers, Signals, native integration, screenshot self-checks, and dozens of pitfall → cause → fix entries. Drop it in ~/.claude/skills and your agent loads it whenever it writes zenit code.
~/.claude/skills/zenit-ui-dev/
Pencilpen.dev我们推荐用 Pencil 画界面,再让 Agent 结合本 Skill 实现。.pen 的 Flex 布局、间距、圆角、字号和 lucide 图标与 zenit 的模型很接近;Skill 里附了字段映射表和 design_diff 比对工具,方便 Agent 按数值而不是凭感觉还原。We recommend designing in Pencil and letting your agent build it with this Skill. Flex layout, spacing, radii, type sizes and lucide icons in a .pen file sit close to zenit’s model; the Skill includes a field mapping and a design_diff tool so the agent ports by the numbers rather than by eye.
没有 WebView,没有虚拟 DOM。UI 树输出扁平的 DisplayItem 列表,由 Metal 渲染器直接消费。No WebView, no virtual DOM. The UI tree emits a flat DisplayItem list consumed directly by the Metal renderers.
render · gpu三缓冲的 SDF、文本与图片渲染器;GPU 完成与 CPU 布局重叠进行。Triple-buffered SDF, text and image renderers; GPU completion overlaps CPU layout.
Signal · Memo · createEffect不重建树、不做 diff。依赖直接定位到订阅它的节点。No tree rebuilds, no diffing. A dependency reaches exactly the nodes that read it.
text · text_coreUnicode 17、UAX #9 双向文本、UAX #29 字素边界,以及端到端的 preedit / commit。Unicode 17, UAX #9 bidi, UAX #29 grapheme boundaries, and end-to-end preedit / commit.
ui.devtools · harness语义定位、虚拟光标、Retina 截图与 drawable 直录 MP4;DevTools 随框架提供。Semantic locators, a virtual cursor, Retina screenshots and drawable-level MP4. DevTools included.

平台、渲染与文本细节由下层接管。边界在构建期强制执行:越界导入会直接编译失败。Platform, rendering and text live below. The boundary is enforced at build time — a forbidden import fails to compile.
Debug 构建下的基本交互目标——包括数万行虚拟列表中的滚动、光标移动与输入。M 系列 Apple silicon。The Debug-build target for basic interactions — including scrolling, cursor movement and typing in virtual lists with tens of thousands of rows. M-series Apple silicon.
layout_isolation 边界截断 dirty 级联layout_isolation boundaries cut dirty cascadesgit clone https://github.com/version-next/zenit.git cp -R zenit/templates/minimal-app ./myapp
模板已含 build.zig、build.zig.zon 与 src/main.zig。Ships with build.zig, build.zig.zon and src/main.zig.
zenit.attach(zenit_dep, exe);
一次调用接入 ui、zenit_app、原生桥与系统框架。One call wires ui, zenit_app, the native bridges and frameworks.
zig build run zig build app
直接运行,或生成可双击的 macOS .app。Run directly, or produce a double-clickable macOS .app.
0.1.0 是第一个公开版本,但 1.0 之前 API 仍可能变化。请固定到明确的版本,每一处破坏性变更都记录在 MIGRATION 中。0.1.0 is the first public release, but the API can still change before 1.0. Pin an exact version; every breaking change is recorded in MIGRATION.
来自社区的现有案例,真实窗口原样录屏。Existing projects from the community, recorded in real windows.
0:18社区案例Community代码 IDE(原生)Code IDE (native)接入真实的 TypeScript 语言服务:边输入边补全、方法签名提示、悬浮文档。补全列表、提示浮层、编辑区和小地图全部由 zenit 在 GPU 上绘制。Wired to a real TypeScript language server: completions as you type, signature help and hover docs. The completion list, the popovers, the editor and the minimap are all drawn by zenit on the GPU.
1:09社区案例Community所见即所得 Markdown 编辑器WYSIWYG Markdown editor一个完整的原生文档编辑器:边写边排版,列表、清单、引用和多级编号即时成形;表格、流程图、代码块和截图都活在同一份文档里。没有 Electron,没有 WebView,每个像素都由 zenit 绘制。A complete native document editor: lists, checklists, quotes and multi-level numbering take shape as you type, and tables, flow diagrams, code blocks and screenshots all live in the same document. No Electron, no WebView — every pixel is drawn by zenit.已经有合作伙伴在用 zenit 开发无限画板设计软件、代码编辑 IDE、视频下载器……同一套节点、样式与原生能力,撑得起完全不同的产品。Partners are already building an infinite-canvas design tool, a code editor IDE, a video downloader… One set of nodes, styles and native capabilities, carrying very different products.
缩放、拖拽与多选都跑在 GPU 上,液态玻璃浮层叠在画布之上。Zoom, drag and multi-select on the GPU, with liquid-glass chrome floating over the canvas.
大文件虚拟滚动、完整输入法、多窗口命令面板与原生菜单。Virtualized large files, a full IME path, multi-window palettes and native menus.
后台任务与进度反馈,下载完成直接拖到 Finder。Background jobs with live progress, and finished files dragged straight into Finder.
框架无限,等你解锁。从一扇窗口开始,做你想做的 Mac 应用。The framework is open-ended. Start with one window and build the Mac app you have in mind.
开始构建Start building无论你是设计师还是开发者——一帧掉帧、一次光标延迟、一条不对劲的缓动曲线都放不下的人,正是我们在找的伙伴。一起把 zenit 打磨成最受欢迎、拥有最好开发体验(DX)与性能的 GPU 原生 UI 框架。Designer or developer — if a dropped frame, a caret one tick late or an easing curve that feels off bothers you, you are exactly who we are looking for. Help us polish zenit into the most loved GPU-native UI framework, with the best DX and performance.