Native SDK | The Complete Toolkit for Native Apps<br>Search docs…⌘K5.4k

Introduction

macOS · Linux · Windows · iOS · Android<br>Toolkit for building native desktop apps<br>Write your interface in native markup and Zig. The toolkit's own engine renders it into real OS windows — no browser, no WebView.<br>For humansFor agents<br>$ npm install -g @native-sdk/cli

Every app on this page — engine, widgets, renderer — as one static release binary.

~100 ms<br>From launch to the first frame on the glass — 71–131 ms warm across these apps on macOS arm64.

Embedded browsers, script engines, or interpreters inside those binaries.

Measured in this repository: zig build -Doptimize=ReleaseFast on macOS arm64; launch is process spawn to first presented frame.

Principles<br>Beautiful by default. Customizable by design.<br>Native SDK exists because expressive UI and native performance should not be competing goals. Developers often choose web-based runtimes because they offer freedom, speed and control over the product experience. But that freedom often comes with a heavy runtime. Native SDK keeps the expressive authoring model and replaces the runtime with native rendering.

The same toolkit. The same player. Two identities.<br>Every difference between examples/soundboard and examples/deck is design tokens and a chrome pass — same widgets, same engine. One is an airy app window that follows the site theme; the other is a dense 512×264 enamel-and-glass hardware unit with one finish by design.<br>Beautiful by default<br>Great software should not start from a blank slate.

Customizable by design<br>Your app should have its own identity, not ours.

Native from the start<br>Every interface is rendered without a browser or WebView.

Predictable state<br>State changes should be explicit, inspectable and easy to reason about.

Simple authoring<br>Interfaces should be easy to read, easy to write and easy to generate.

AI is part of the workflow<br>Native SDK is designed for a world where humans and AI agents build software together.

Predictable by design<br>Events. Messages. State. Interface.<br>Events produce messages, messages update state, and state renders the interface — simple to debug, simple to maintain, and simple for AI to generate. This is examples/ui-inbox from the repository: the whole UI is one declarative view, and one update function is the only place state changes. Mistakes in a view are compile errors with line and column, and in dev you edit the view while the app runs, keeping state.<br>src/inbox.native<br>div]:my-0! [&>div]:rounded-none! [&>div]:border-none! [&>div]:bg-transparent!">column background="background"><br>row height="{header_height}" padding="12" gap="10" cross="center"<br>background="surface" window-drag="true" label="Inbox header"><br>spacer width="{chrome_leading}" /><br>spacer grow="1" /><br>if test="{doneCount}"><br>button variant="ghost" on-press="clear_done">Clear donebutton><br>if><br>row><br>separator /><br>column grow="1" gap="12" padding="16"><br>row gap="8" cross="center"><br>text-field text="{draft}" placeholder="New task…"<br>on-input="draft_edit" on-submit="add" grow="1" /><br>button variant="primary" on-press="add">Add taskbutton><br>row><br>tabs gap="8"><br>for each="filters" as="f"><br>button size="sm" selected="{f == filter}"<br>on-press="set_filter:{f}">{f}button><br>for><br>tabs><br>scroll grow="1"><br>column gap="2"><br>for each="visible" key="id" as="t"><br>row gap="8" padding="6" cross="center"><br>checkbox checked="{t.done}" on-toggle="toggle:{t.id}"<br>label="Done" /><br>text grow="1">{t.title}text><br>row><br>for><br>column><br>scroll><br>column><br>status-bar>{openCount} open · {doneCount} donestatus-bar><br>column>

src/main.zig<br>div]:my-0! [&>div]:rounded-none! [&>div]:border-none! [&>div]:bg-transparent!">pub const Msg = union(enum) {<br>add,<br>toggle: u32,<br>set_filter: Filter,<br>clear_done,<br>draft_edit: canvas.TextInputEvent,<br>chrome_changed: native_sdk.WindowChrome,<br>};

pub fn update(model: *Model, msg: Msg) void {<br>switch (msg) {<br>.add => {<br>if (model.draftEmpty()) {<br>model.addGeneratedTask();<br>} else {<br>model.addTask(std.mem.trim(u8, model.draft(), " "));<br>model.draft_buffer.clear();<br>},<br>.toggle => |id| if (model.taskById(id)) |task| {<br>task.done = !task.done;<br>},<br>.set_filter => |filter| model.filter = filter,<br>.clear_done => model.clearDone(),<br>.draft_edit => |edit| model.draft_buffer.apply(edit),<br>.chrome_changed => |chrome| {<br>model.chrome_leading = chrome.insets.left;<br>model.header_height =<br>@max(header_natural_height, chrome.insets.top);<br>},

Built from the source above and captured running on macOS. The pixels come from Native SDK’s engine; the window and scroll physics come from the OS.

Built for modern apps<br>Seven real apps, in the repo<br>Dashboards, editors, tools, internal apps, creative software — every screenshot is rendered by Native SDK’s deterministic engine from the example apps in examples/, the same state captured once per color scheme. Flip the site theme and the apps flip with it — deck alone stays dark, by design.<br>Markdown ViewerSoundboardDeckFeedNotesSystem MonitorCalculator

A split-pane editor whose preview is native...