A React renderer for GPUI (Zed's GPU-accelerated UI framework) using Bun native FFI.
npm install gpui-reactA React renderer for GPUI (Zed's GPU-accelerated UI framework) using Bun native FFI.
```
React Component (JSX)
↓
React Reconciler (src/reconciler/host-config.ts)
↓
Element Store (src/reconciler/element-store.ts)
↓
Bun FFI (src/reconciler/gpui-binding.ts)
↓
Rust FFI (rust/src/lib.rs)
↓
GPUI Runtime (rust/src/renderer.rs)
↓
GPU Rendering (GPUI)
``
gpui-react/
├── rust/ # Rust FFI library (cdylib)
│ └── src/ # FFI exports, GPUI rendering, command bus
├── src/reconciler/ # React reconciler, FFI bindings, element store
└── demo/ # Demo applications (5 entry points)
`bash`
bun add gpui-react react
Create a GPUI window and render React components:
`tsx
// index.ts
import React from "react";
import { createRoot } from "gpui-react";
import { App } from "./app";
const root = createRoot({
width: 800,
height: 800,
});
root.render(
`tsx
// app.tsx
import React, { useState, useEffect } from "react";export function App() {
const [text, setText] = useState("Hello GPUI!");
useEffect(() => {
const timer = setTimeout(() => {
setText(
Updated: ${new Date().toLocaleTimeString()});
}, 1000);
return () => clearTimeout(timer);
}, []); return (
style={{
display: "flex",
flexDirection: "column",
gap: 20,
backgroundColor: "#1e1e1e",
padding: 40,
alignItems: "center",
}}
>
style={{
color: "#1db588",
fontSize: 25,
fontWeight: "bold",
}}
>
{text}
$3
| Element | GPUI Mapping | Notes |
|---------|--------------|-------|
|
div | div() | Block container |
| span | span() | Inline container, contains text children |
| text` | Text nodes | Always child of span |- AGENTS.md - Root knowledge base
- src/reconciler/AGENTS.md - React reconciler layer
- rust/src/AGENTS.md - Rust FFI layer
- ROADMAP.md - Development roadmap
- Bun ≥ 1.0
- Rust ≥ 1.70
- GPUI dependencies (downloaded automatically on first cargo build)