ZFrame 是一个原生桌面 UI 框架，使用 TypeScript/TSX 开发，Zig 实现核心引擎，Skia 提供渲染能力，Bun 作为入口运行时。
Zframe 希望用 Web 技术栈（TypeScript + TSX + CSS）开发真正的原生桌面应用，同时保持高性能和原生体验，你会发现：
No Electron with Chromium，No Tarui with Webview2，No Fullter with Dart， Just TypeScript with Fun。
整体架构：
┌─────────────────────────────────────────────┐
│ Application │
│ TS / TSX / CSS / Sinal │
├─────────────────────────────────────────────┤
│ JS Runtime │
│ Component / State / Reconcile │
├─────────────────────────────────────────────┤
│ Zframe Runtime │
│ Node / Layout / Event │
├─────────────────────────────────────────────┤
│ Render Engine │
│ Render Tree / Commands / Paint │
├─────────────────────────────────────────────┤
│ Zig Engine │
│ Core / Memory / Scheduling │
├─────────────────────────────────────────────┤
│ Backend Interface │
│ Skia Tgfx Z2d SDL3 │
├─────────────────────────────────────────────┤
│ Native Platform │
│ macOS / Windows / Linux │
└─────────────────────────────────────────────┘底层架构：
┌───────────────────────────────────────────┐
│ TS Runtime │
│ │
│ <Window> <Button> <Text> <View> │
└─────────────────────┬─────────────────────┘
│
▼
┌───────────────────────────────────────────┐
│ Zen Runtime │
│ │
│ Component / State / Event / UI Tree │
└─────────────────────┬─────────────────────┘
│
┌───────────┴───────────┐
▼ ▼
┌───────────────────┐ ┌───────────────────┐
│ Layout │ │ Platform │
│ │ │ │
│ Flex / Box / CSS │ │ Window │
│ │ │ Tray │
└─────────┬─────────┘ │ Menu │
│ │ Dialog │
▼ │ Clipboard │
┌───────────────────┐ └─────────┬─────────┘
│ Render │ │
│ │ ▼
│ Render Commands │ Native OS
└─────────┬─────────┘
│
▼
┌───────────────────┐
│ Skia │
│ │
│ Canvas / Text │
│ Image / Path │
│ GPU │
└─────────┬─────────┘
│
▼
Metal /
D3D12 / Vulkan绘制流程：
TS / TSX
│
Bun / Node / Deno
│
FFI
│
Zig core
│
Point / Rect / Color
│
┌───────────┴───────────┐
▼ ▼
layout render
│
▼
backend
│
▼
Zig Skia
│
▼
C ABI
│
▼
C++ Skia
zframe/
├── README.md
├── LICENSE
├── CHANGELOG.md
├── build.zig
├── build.zig.zon
│
├── engine/ # zframe 核心引擎
│ │
│ ├── core/ # 平台无关核心能力
│ │ ├── include/ # engine 外部使用，如 Swift、C++
│ │ │ └── zframe.h
│ │ │ └── zframe-ipc.h
│ │ │ └── types.h
│ │ │ └── geometry.h
│ │ │ └── version.h
│ │ │
│ │ └── src/ # zig engine 使用
│ │ ├── types.zig
│ │ ├── geometry.zig
│ │ └── allocator.zig
│ │
│ └── platform/ # zframe 系统原生能力平台：原生组件与原生能力
│ │ ├── platform.zig
│ │ │
│ │ ├── macos/
│ │ │ ├── window.zig
│ │ │ ├── window.mm
│ │ │ ├── input.zig
│ │ │ └── metal.zig
│ │ ├── windows/
│ │ │ ├── window.zig
│ │ │ ├── window.cpp
│ │ │ ├── input.zig
│ │ │ └── d3d12.zig
│ │ │
│ │ └── linux/
│ │ ├── window.zig
│ │ ├── input.zig
│ │ ├── wayland.zig
│ │ └── vulkan.zig
| │
│ ├── layout/ # zframe UI布局系统：绘制无关的计算工具
│ │ ├── layout.zig
│ │ ├── flex.zig
│ │ ├── box.zig
│ │ └── constraints.zig
│ │
│ ├── render/ # zframe UI抽象层：UI Node->Layout Rect->Style->Paint
│ │ ├── renderer.zig
│ │ ├── command.zig
│ │ ├── paint.zig
│ │ └── surface.zig
│ │
│ ├── runtime/ # zframe UI Runtime：State/Event/LifeCircle
│ │ ├── node.zig
│ │ ├── tree.zig
│ │ ├── state.zig
│ │ ├── event.zig
│ │ └── reconciler.zig
│ │
│ ├── backend/ # zframe 后端抽象层
│ │ ├── skia
│ │ │ ├── include/ # Skia C++ Wrapper
│ │ │ │ └── zframe_skia.h
│ │ │ └── src/
│ │ │ └── zframe_skia.cpp
│ │ ├── z2d
│ │ └── sdl3
│
├── jsruntime/ # JavaScript / TypeScript Runtime
│ ├── bridge/
│ │ ├── native.ts
│ │ └── renderer.ts
│ │
│ ├── ui/
│ │ ├── createElement.ts
│ │ ├── component.ts
│ │ └── hooks.ts
│ │
│ ├── dom/
│ │ ├── element.ts
│ │ ├── text.ts
│ │ └── tree.ts
│ │
│ └── css/
│ ├── parser.ts
│ ├── style.ts
│ └── selector.ts
│
├── packages/ # 对外 npm 包
│ ├── core/
│ │ ├── package.json
│ │ └── src/
│ │
│ ├── runtime/
│ │ ├── package.json
│ │ └── src/
│ │
│ ├── compiler/
│ │ ├── package.json
│ │ └── src/
│ │
│ └── cli/
│ ├── package.json
│ └── src/
│
├── bindings/ # Native ABI / FFI
│ ├── c/
│ │ ├── zframe.h
│ │ └── zframe.cpp
│ │
│ └── generated/
│
├── examples/ # 示例项目
│ ├── hello/
│ ├── counter/
│ ├── flex/
│ └── css/
│
├── tests/ # 测试
│ ├── core/
│ ├── layout/
│ ├── render/
│ ├── runtime/
│ └── integration/
│
├── tools/ # 开发工具
│ ├── build/
│ ├── generate/
│ └── release/
│
└── docs/ # 文档
├── architecture/
├── runtime/
├── rendering/
├── css/
└── platform/You can use it like electron：
npm i @zframePrograming your app：
import { Window, View, Text, Button } from "@zframe/ui";
export default function App() {
return (
<Window title="My zframe App" width={800} height={600}>
<View style={{
padding: 20,
background: "#ffffff",
}}>
<Text>Hello zframe</Text>
<Button onClick={() => console.log("hello")}>
Click Me
</Button>
</View>
</Window>
);
}- TS解析器：
- 开发阶段采用 Bun 进程调用：Zig → spawn bun → bun 解析 TSX → 调用 _native*
- 生产阶段采用 集成 QuickJS 内嵌：Oxc 编译为 js → Zig 内嵌 QuickJS → 直接执行 JS
- 布局引擎：当前自研极简单 flex 布局，未来添加 position、grid、box
- 完整 css 支持：class、style、css 变量等