Un framework de UI por GPU de alto rendimiento para Zig. Signals, recetas de estilo, flex / grid y DevTools se sienten como la web; el renderizado con Metal y un camino completo de texto e IME entregan una app nativa: una Hello Button.app en ReleaseSmall ocupa 1.7 MB.

Empieza en 5 minutos
01 / SIGNALSSignals, no un DOM virtual.0:00 / 1:53
HELLO, ZENIT

Un archivo.
Una ventana nativa.

El código completo de examples/hello_button/main.zig y la .app que produce al compilar. Las imágenes de la ventana las graba el E2E harness, que pulsa el botón tres veces en la ventana real.

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
Ventana
640 × 480 · Metal
.app
1.7 MB · ReleaseSmall
Grabado con
E2E harness
/01
1.7MB
Hello Button .app (ReleaseSmall)
/02
51
Stories de componentes grabadas
/03
2,026
Iconos Lucide incluidos
/04
60fps
Objetivo de interacción en Debug
AI SKILL · PARA CLAUDE CODE / CUALQUIER AGENTE

Enseña a tu agente
a escribir UI zenit de verdad.

zenit-ui-dev es una Agent Skill destilada del propio framework zenit y del historial de un editor de macOS en producción construido con él: elección de componentes, las tres capas de estilo, Signals, integración nativa, autoverificación por capturas y decenas de entradas trampa → causa → solución. Colócala en ~/.claude/skills y tu agente la cargará cada vez que escriba código 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
Descomprime en
~/.claude/skills/zenit-ui-dev/
Pencilpen.dev
FLUJO RECOMENDADO · PENCIL + SKILL
Combínala con Pencil: diseña y luego construye con IA

Te recomendamos diseñar en Pencil y dejar que tu agente lo construya con esta Skill. El layout Flex, los espaciados, los radios, los tamaños de texto y los iconos lucide de un archivo .pen están muy cerca del modelo de zenit; la Skill incluye una tabla de correspondencia de campos y una herramienta design_diff para que el agente traslade el diseño con números y no a ojo.

  1. 01.penDiseño en Pencil
  2. 02MCPEl agente lee valores exactos
  3. 03zigCódigo zenit con widgets + tokens
  4. 04diffDiff numérico contra el diseño
01 / CAPACIDADES

Nativo de la
ventana al píxel.

Sin WebView, sin DOM virtual. El árbol de UI emite una lista plana de DisplayItem que consumen directamente los renderers de Metal.

Renderizado GPU con Metal

render · gpu

Renderers de SDF, texto e imagen con triple búfer; la finalización en la GPU se solapa con el layout en la CPU.

LabelCount ← dirtyButtonBox

Signals de grano fino

Signal · Memo · createEffect

Sin reconstruir el árbol, sin diffing. Una dependencia llega exactamente a los nodos que la leen.

baselinex-height
Aa字ع

Texto e IME

text · text_core

Unicode 17, bidi UAX #9, límites de grafemas UAX #29 y preedit / commit de extremo a extremo.

Click megetByRole("button")

E2E en ventana real

ui.devtools · harness

Localizadores semánticos, un cursor virtual, capturas Retina y MP4 a nivel de drawable. DevTools incluidas.

02 / COMPONENTES

51 componentes,
cada píxel en la GPU.

Ver todos los componentes
zenit components: buttons, inputs, select, switches, checkboxes, radios, slider, progress, tabs, calendar, steps, table, alerts, tags, badges, chips, timeline, tree, accordion, rate
No es un mockup: es la story Component Wall de Storybook, capturada desde una ventana real por el E2E harness. Cada pieza se puede pulsar, escribir y desplazar.
03 / ARQUITECTURA

Tu app importa
dos módulos.

La plataforma, el renderizado y el texto viven por debajo. El límite se impone en tiempo de compilación: un import prohibido no compila.

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

El objetivo en Debug para las interacciones básicas, incluidos el desplazamiento, el movimiento del cursor y la escritura en listas virtuales de decenas de miles de filas. Apple silicon serie M.

01Instancias con triple búfer; la sincronización de frames solapa la GPU con el layout en la CPU
02Display list con caché de subárboles: los subárboles estáticos se saltan layout y render
03Los límites layout_isolation cortan las cascadas de dirty
04Un planificador diferido reparte el trabajo pesado entre varios frames
Del capítulo 08 de la película: el hover y un spinner solo marcan como dirty su propio subárbol y el resto se reproduce desde la caché; cuando nada cambia, el run loop duerme: 0 frames, 0 trabajo de GPU. Medido en M4 Max · 5K · 60 Hz.
05 / QUICK START

Tres pasos hasta
tu primera ventana.

Obtén la plantilla01
git clone https://github.com/version-next/zenit.git
cp -R zenit/templates/minimal-app ./myapp

Incluye build.zig, build.zig.zon y src/main.zig.

Conecta la dependencia02
zenit.attach(zenit_dep, exe);

Una sola llamada conecta ui, zenit_app, los puentes nativos y los frameworks.

Compila y ejecuta03
zig build run
zig build app

Ejecuta directamente o genera una .app de macOS que se abre con doble clic.

06 / ESTADO

Sinceramente, aún
no está listo.

0.1.0 es la primera versión pública, pero la API aún puede cambiar antes de 1.0. Fija una versión exacta; cada cambio incompatible queda registrado en MIGRATION.

macOS · Apple Silicon
NSWindow + Metal: la única plataforma probada de forma continua
Compatible
Linux · Windows
Los backends son esqueletos; aún no se pueden usar
Previsto
Accesibilidad
El árbol a11y y el puente NSAccessibility existen, pero 0 de 61 componentes han superado la validación con VoiceOver. No lo uses donde se requiera accesibilidad.
No compatible
API pública
Se permiten cambios incompatibles antes de 1.0, cada uno registrado en MIGRATION; se congela en v1.0.0
pre-1.0
07 / EJEMPLOS

Míralo en
una app real.

Proyectos existentes de la comunidad, grabados en ventanas reales.

Ver los ejemplos
08 / HECHO CON ZENIT

Un framework abierto.
Tu idea, la siguiente.

Ya hay socios creando con zenit una herramienta de diseño de lienzo infinito, un IDE de código, un descargador de vídeos… Un mismo conjunto de nodos, estilos y capacidades nativas que sostiene productos muy distintos.

En desarrollo por un socio
Herramienta de diseño de lienzo infinito

Zoom, arrastre y selección múltiple en la GPU, con paneles de vidrio líquido flotando sobre el lienzo.

GPU canvasGlassBoxmagnify
En desarrollo por un socio
IDE de edición de código

Archivos grandes virtualizados, un camino completo de IME, paletas multiventana y menús nativos.

VirtualListIMEmulti-window
En desarrollo por un socio
Descargador de vídeos

Tareas en segundo plano con progreso en vivo, y archivos terminados que se arrastran directamente al Finder.

workersProgressdrag-out
Lo siguiente
Tu idea

El framework no tiene techo. Empieza con una ventana y construye la app de Mac que tienes en mente.

Empieza a construir
CÓDIGO ABIERTO · BUSCAMOS GENTE

¿Te obsesiona el
rendimiento y el movimiento de la UI? Únete.

Diseñador o desarrollador: si te molesta un frame perdido, un cursor que llega un tick tarde o una curva de easing que no se siente bien, eres justo a quien buscamos. Ayúdanos a pulir zenit hasta convertirlo en el framework de UI nativo de GPU más querido, con la mejor DX y el mejor rendimiento.

DiseñadoresVisual de componentes, curvas de movimiento, detalles de interacción
DesarrolladoresRenderizado, layout, el motor de texto y el rendimiento