---
title: "Überblick — zenit Zig UI Doku"
description: "Bauen Sie in Zig wirklich native macOS-Desktop-UIs. zenit vereint Fenster, GPU-Rendering, Text, Eingabemethoden und Barrierefreiheit in einem klaren…"
url: https://zenit.z.express/de/docs
language: de
alternate_en: https://zenit.z.express/docs.md
alternate_zh: https://zenit.z.express/zh/docs.md
alternate_es: https://zenit.z.express/es/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
project: zenit v0.1.0-alpha (Zig 0.15.2, macOS)
source: https://github.com/version-next/zenit
---

# Das zenit-Handbuch

Bauen Sie in Zig wirklich native macOS-Desktop-UIs. zenit vereint Fenster, GPU-Rendering, Text, Eingabemethoden und Barrierefreiheit in einem klaren UI-Modell; dieses Handbuch führt Sie vom ersten Fenster bis zur wartbaren Produktions-App.

[In 5 Minuten starten](https://zenit.z.express/de/docs/guide/getting-started)

$zig build run

**0.15.2**Zig-Version

**Metal**Aktuelles GPU-Backend

**2 tiers**Öffentliche API: ui.X und 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);
}
```

Sie entwickeln mit Claude Code oder einem anderen Agenten? Installieren Sie zuerst den zenit UI dev Skill.

Er bündelt dieses Handbuch, die Entscheidungstabelle für Komponenten und Fallstricke aus echten Projekten zu Anweisungen, die Ihr Agent bei Bedarf lädt – so folgt der Code, den er schreibt, den zenit-Konventionen.

[Skill herunterladen.zip · 54 KB](https://zenit.z.express/downloads/zenit-ui-dev.zip)[Installationsanleitung](https://zenit.z.express/de/docs/guide/ai-skill)

## Lernpfad

Arbeiten Sie ihn einmal der Reihe nach durch – etwa 45 Minuten – und Sie haben das komplette mentale Modell, um zenit-Apps selbstständig zu bauen.

[01Das erste Fenster startenAbhängigkeit einbinden, UI mounten, bauen und starten.10 min →](https://zenit.z.express/de/docs/guide/getting-started)[02Nodes und LayoutMit box, stack und text zusammensetzen.12 min →](https://zenit.z.express/de/docs/guide/ui-tree)[03Datengetriebene UISignal, Memo und Effect im Zusammenspiel.12 min →](https://zenit.z.express/de/docs/guide/reactivity)[04Ein Styling-SystemTokens, benannte Styles und Recipes.11 min →](https://zenit.z.express/de/docs/guide/styling)

## Die Architektur, die Sie nutzen

Apps hängen nur von der stabilen öffentlichen Schicht ab; Plattform und Rendering übernimmt zenit.

LAYERS

`zenit.attach(dep, exe)` fügt Ihrem Executable genau zwei Modul-Importe hinzu – `ui` und `zenit_app` –, kompiliert dann die nativen Bridges und linkt die System-Frameworks. Interne Module sind gar nicht in Ihrem Build-Graphen: nicht „bitte nicht“, sondern „geht nicht“.

## Mehr als eine Sammlung von APIs

Diese drei ziehen sich durch Runtime, Text-Stack und Tooling – jeweils belegt durch eine lauffähige Demo und Nachweise im echten Fenster.

[DATA FLOWPräzise Signal-UpdatesKein Neuaufbau eines virtuellen Baums, kein Diff über den ganzen Baum – eine Abhängigkeit erreicht direkt den abonnierten Node.Animation ansehen →](https://zenit.z.express/de/docs/guide/reactivity#signal-not-diffing)[TEXT ENGINEUnicode 17 + IMEUAX #9 Bidi, UAX #29 Graphemgrenzen und ein durchgängiger preedit / commit-Eingabepfad.Konformitätsdaten ansehen →](https://zenit.z.express/de/docs/guide/text-engine)[TOOLINGBeobachtbares E2E im echten FensterSemantische Node-Suche, ein virtueller Cursor, Retina-PNG-Aufnahmen und MP4s direkt aus dem Drawable aufgezeichnet.Aufnahmen ansehen →](https://zenit.z.express/de/docs/advanced/e2e)

## Drei Prinzipien

Halten Sie sich daran, bleibt Ihr Code klar, während sich zenit noch schnell weiterentwickelt.

**Nur aus der öffentlichen Schicht importieren**

Verwenden Sie `ui.*`, `ui.<group>.*` und `zenit_app.App` – greifen Sie nie in interne Verzeichnisse.

**Daten bestimmen die UI**

Persistenter Zustand liegt in Signals oder gebundenem Zustand; Abgeleitetes mit Memo, Seiteneffekte mit Effect.

**Tokens zuerst**

Farben, Schrift, Abstände und Radien kommen aus dem Theme; wenn Sie die Skala verlassen müssen, machen Sie das mit `ui.arb` explizit.