Metal GPU 렌더링
render · gpu트리플 버퍼링된 SDF·텍스트·이미지 렌더러. GPU 완료와 CPU 레이아웃이 겹쳐서 진행됩니다.
고성능 Zig GPU UI 프레임워크입니다. Signal, 스타일 레시피, Flex / Grid, DevTools는 웹처럼 쓰고, Metal 렌더링과 완전한 텍스트·IME 처리로 네이티브 앱으로 동작합니다. ReleaseSmall로 빌드한 Hello Button.app은 1.7 MB에 불과합니다.
examples/hello_button/main.zig의 전체 소스와, 이를 컴파일한 .app입니다. 창 화면은 E2E harness가 실제 창에서 버튼을 세 번 클릭하며 녹화했습니다.
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에 넣으면 에이전트가 zenit 코드를 쓸 때마다 자동으로 불러옵니다.
~/.claude/skills/zenit-ui-dev/
Pencilpen.devPencil로 화면을 그리고, 이 Skill로 에이전트가 구현하게 하는 방식을 추천합니다. .pen 파일의 Flex 레이아웃, 간격, 모서리 반경, 글자 크기, lucide 아이콘은 zenit의 모델과 매우 가깝습니다. Skill에는 필드 매핑표와 design_diff 비교 도구가 들어 있어 에이전트가 감이 아닌 수치로 옮깁니다.
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 포함.

플랫폼, 렌더링, 텍스트는 아래 계층이 맡습니다. 경계는 빌드 시점에 강제되어, 금지된 import는 컴파일에 실패합니다.
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);
한 번의 호출로 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 앱을 만드세요.
만들기 시작디자이너든 개발자든, 한 프레임의 누락, 한 틱 늦은 캐럿, 어딘가 어색한 이징 곡선을 그냥 넘기지 못한다면 바로 우리가 찾는 사람입니다. zenit을 최고의 개발 경험(DX)과 성능을 갖춘, 가장 사랑받는 GPU 네이티브 UI 프레임워크로 함께 다듬어 주세요.