---
title: "Resumen — Docs de zenit Zig UI"
description: "Construye interfaces de escritorio para macOS verdaderamente nativas en Zig. zenit reúne ventanas, renderizado en GPU, texto, métodos de entrada y…"
url: https://zenit.z.express/es/docs
language: es
alternate_en: https://zenit.z.express/docs.md
alternate_zh: https://zenit.z.express/zh/docs.md
alternate_ja: https://zenit.z.express/ja/docs.md
alternate_ko: https://zenit.z.express/ko/docs.md
alternate_fr: https://zenit.z.express/fr/docs.md
alternate_de: https://zenit.z.express/de/docs.md
project: zenit v0.1.0-alpha (Zig 0.15.2, macOS)
source: https://github.com/version-next/zenit
---

# El manual de zenit

Construye interfaces de escritorio para macOS verdaderamente nativas en Zig. zenit reúne ventanas, renderizado en GPU, texto, métodos de entrada y accesibilidad en un modelo de UI claro; este manual te lleva de tu primera ventana a una app de producción mantenible.

[Empieza en 5 minutos](https://zenit.z.express/es/docs/guide/getting-started)

$zig build run

**0.15.2**Versión de Zig

**Metal**Backend GPU actual

**2 tiers**API pública: ui.X y ui.<group>.X

`src/main.zig`

```zig
const std = @import("std");
const ui = @import("ui");
const App = @import("zenit_app").App;

fn mountUi(cx: *ui.Cx, _: *ui.Scope) anyerror!*ui.Node {
    return ui.text(cx, "Hello, zenit!", .{
        .font_size = cx.tokens.font_size.xxxl,
        .color = cx.tokens.color.fg_primary,
    });
}

pub fn main() !void {
    var gpa = std.heap.GeneralPurposeAllocator(.{}){};
    defer _ = gpa.deinit();

    const app = try App.init(gpa.allocator(), .{
        .window = .{ .title = "Hello" },
    });
    defer app.deinit();
    try app.runWith(mountUi);
}
```

¿Desarrollas con Claude Code u otro agente? Instala primero la zenit UI dev Skill.

Empaqueta este manual, la tabla de decisión de componentes y las trampas de proyectos reales en instrucciones que tu agente carga cuando las necesita, para que el código que escribe siga las convenciones de zenit.

[Descargar la Skill.zip · 54 KB](https://zenit.z.express/downloads/zenit-ui-dev.zip)[Guía de instalación](https://zenit.z.express/es/docs/guide/ai-skill)

## Ruta de aprendizaje

Recórrela una vez, en orden —unos 45 minutos— y tendrás el modelo mental completo para crear apps con zenit por tu cuenta.

[01Ejecuta tu primera ventanaConecta la dependencia, monta la UI, compila y ejecuta.10 min →](https://zenit.z.express/es/docs/guide/getting-started)[02Nodos y layoutCompón la interfaz con box, stack y text.12 min →](https://zenit.z.express/es/docs/guide/ui-tree)[03UI guiada por datosSignal, Memo y Effect trabajando juntos.12 min →](https://zenit.z.express/es/docs/guide/reactivity)[04Un sistema de estilosTokens, estilos con nombre y Recipes.11 min →](https://zenit.z.express/es/docs/guide/styling)

## La arquitectura que usarás

Las apps dependen solo de la capa pública estable; zenit se encarga de la plataforma y el renderizado.

LAYERS

`zenit.attach(dep, exe)` añade exactamente dos importaciones de módulo a tu ejecutable —`ui` y `zenit_app`—, luego compila los puentes nativos y enlaza los frameworks del sistema. Los módulos internos ni siquiera están en tu grafo de compilación: no es “mejor no usarlos”, es “no se puede”.

## Más que un conjunto de APIs

Estas tres capacidades atraviesan el runtime, el stack de texto y las herramientas; cada una está respaldada por una demo ejecutable y evidencia en ventana real.

[DATA FLOWActualizaciones precisas con SignalSin reconstruir un árbol virtual ni hacer diff de todo el árbol: una dependencia llega directamente al nodo suscrito.Ver la animación →](https://zenit.z.express/es/docs/guide/reactivity#signal-not-diffing)[TEXT ENGINEUnicode 17 + IMEBidi UAX #9, límites de grafemas UAX #29 y una ruta de entrada preedit / commit de extremo a extremo.Ver los datos de conformidad →](https://zenit.z.express/es/docs/guide/text-engine)[TOOLINGE2E en ventana real que puedes observarBúsqueda semántica de nodos, un cursor virtual, capturas PNG Retina y MP4 grabados directamente desde el drawable.Ver las grabaciones →](https://zenit.z.express/es/docs/advanced/e2e)

## Tres principios

Síguelos y tu código se mantendrá claro mientras zenit siga evolucionando rápido.

**Importa solo desde la capa pública**

Usa `ui.*`, `ui.<group>.*` y `zenit_app.App`; nunca entres en los directorios internos.

**Deja que los datos guíen la UI**

El estado persistente vive en Signals o en estado enlazado; deriva con Memo y aplica efectos secundarios con Effect.

**Tokens primero**

Color, tipografía, espaciado y radios vienen del tema; cuando debas salirte de la escala, decláralo con `ui.arb`.