React-GPUI Renderer

A React renderer for GPUI (Zed's GPU-accelerated UI framework) using Bun native FFI.

Architecture

``
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)
`

Project Structure

`
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)
`

Quick Start

$3

`bash
bun add gpui-react react
`

$3

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}