中文文档 · React / Solid → GPU
React 的写法，
GPU 的渲染管线
用 TypeScript 写 React 或 Solid 组件树，GPUIX 把它交给 GPUI，由 Metal、DirectX 或 Vulkan 直接画出来。没有 Electron，也没有 WebView。
import { useState } from 'react'
import { render } from '@gpuix/react'
function App() {
const [count, setCount] = useState(0)
return (
<div style={{ padding: 24, height: '100%' }}>
<div
onClick={() => setCount((c) => c + 1)}
style={{
padding: 12,
borderRadius: 8,
backgroundColor: '#232323',
}}
>
<text style={{ color: '#e2e2e2' }}>
Count: {count}
</text>
</div>
</div>
)
}
render(<App />, { width: 800, height: 600 })从组件树到像素，中间没有浏览器
GPUI 是 Zed 编辑器用来绘制自己的那套 GPU UI 框架。GPUIX 把 JSX 接到它的元素协议上，所以hover之类的样式写在 Rust 里，而不是 CSS 里。
- 01
组件树
你写的 JSX 与 useState，标准 React 或 Solid。
- 02
GPUI 元素
布局、文本测量、命中测试全部在 Rust 侧完成。
- 03
渲染后端
Metal、DirectX 或 Vulkan，按平台选一个。
- 04
屏幕像素
没有 DOM，没有 WebView，没有转译层。
- 3
- 桌面渲染后端
- 0
- WebView
- 82 MB
- Bun 版 .app
它替你做了什么
原生动画
React 只发一次目标值，Rust 计算中间帧并自己请求刷新。每一帧都不触发一次 React 渲染，也不走 N-API。
React 与 Solid 皆可
两套运行时，同一套元素协议。
- @gpuix/reactReact 运行时
- @gpuix/solidSolid 运行时
虚拟列表
React 与 Rust 保留全部行，GPUI 只构建靠近视口的那几行。行高可以各不相同，你不必先声明。
屏外视口屏外
实心 = 视口内，真正被构建并绘制的行
可选中的原生文本
文本由 GPUI 排版，因此可以跨元素选中、复制，带语法高亮，也能做搜索高亮。
<markdown>{doc}</markdown>
<code lang="rust">{src}</code>
<diff patch={patch} />像 Playwright 一样测试
用 testId 标记元素再驱动它们。鼠标走真实的 GPUI 输入路径，截图读取的是 GPU 表面，不是 DOM 快照。
const button = await driver.query({ testId: 'increment' })
await button.click()
expect(await driver.screenshot()).toMatchFile('counter.png')三条命令，一个窗口
无需克隆仓库，无需原生构建，也不需要装 Rust 工具链。
- 01 · 创建
bunx @gpuix/cli new my-app下载官方示例应用并装好依赖 - 02 · 进入
cd my-app一个文件的应用：app.tsx - 03 · 运行
bun run dev保存即在同一个窗口里重挂载
macOS · Windows · Linux —— 同一套元素协议，三个桌面平台
全部文档
33 篇 · 按8 组组织 · 按 ⌘K搜任何 API 名称