GPUIV

Build GPUI-based desktop apps with Vue 3 and TypeScript — without a browser shell.

English · 简体中文

GPUIV is a Vue 3 custom renderer for GPUI, the UI framework behind Zed. Write your application with Vue components, reactivity, and TSX; GPUI handles flexbox layout and GPU painting through Metal, DirectX, or Vulkan. No browser DOM, Chromium, or WebView is involved in rendering.

Why GPUIV? · Demos · Quick start · API reference · Build from source

A chat client built from Vue components, with virtualized messages, selectable Markdown, highlighted diffs, animated panels, and a native composer. Explore the source or run the demo. Replies use demo data.

Why GPUIV?

GPUIV combines the Vue development model with a direct desktop rendering path. It is especially well suited to AI chat clients, editors, dashboards, and other content-rich developer tools.

Advantage	What it means in practice
Keep the Vue 3 programming model	Build with components, reactivity, TypeScript, and TSX. Use Fast Refresh and Vue DevTools while developing; install prebuilt packages without compiling Rust for your app.
Render without a browser shell	Your interface lives in desktop windows and is laid out and painted by GPUI. There is no embedded Chromium or WebView in the rendering path.
Send only what changed	Vue diffs component updates, then sends the resulting host mutations to Rust in one atomic batch per flush. Only changed elements cross the JavaScript/Rust boundary; GPUI retains ownership of layout and painting.
Build content-rich tools without starting from scratch	Use Markdown display and WYSIWYG editing, syntax highlighting, virtualized lists and diffs, ANSI logs, cross-element text selection, native inputs, and IME support.
Integrate with the desktop	Create multiple windows and use file dialogs, clipboard text and images, menus, tray icons, global shortcuts, notifications, file opening, and deep links from the same application model.
Test the interface users actually see	Drive native input with Playwright-like automation, inspect painted text, take GPU-backed screenshots, and capture exact animation frames with a deterministic clock. GPU test rendering is available on macOS and Windows.
Target three desktop platforms	Share your Vue component code across macOS, Windows, and Linux, with Metal, DirectX, and Vulkan rendering backends respectively. See platform support and current limits.

Examples

These screenshots show real example components rendered by GPUIV, not design mockups. The committed images were captured with the GPU-backed test renderer on macOS. Click an image to view it at full size.

Explore the full Demo Gallery for more interaction states, native text rendering, and runnable desktop examples.

Native Markdown editor	Component gallery
Edit formatted blocks, switch to Markdown source, search, and navigate by outline. Includes mixed Chinese and English text, tables, tasks, and highlights. Source · bun --hot markdown-editor.tsx	Explore themed buttons, chips, cards, searchable lists, and other application building blocks with light/dark themes. Source · bun --hot beautiful-ui.tsx Beautiful UI is a private workspace demo, not a published package.

Canvas and custom visuals

Draw and composite through getContext("2d"), including paths, gradients, clipping, image data, and W3C blend modes. Export the result as PNG, or combine images and SVG with the rest of your Vue interface.

Canvas blend source · bun --hot canvas-blends.tsx · Try the paint app for brush strokes, shapes, erasing, and undo / redo.

Run the examples

Clone and build the repository, then run from examples/:

cd examples
bun --hot chat.tsx

Start here	Run	What to try
Counter	bun --hot counter.tsx	Vue state, click events, and hover styles in a minimal app
Chat	bun --hot chat.tsx	Switch conversations, collapse the sidebar, open the model picker
Markdown editor	bun --hot markdown-editor.tsx	Edit formatted text, toggle a task, switch to source mode
Component gallery	bun --hot beautiful-ui.tsx	Toggle light/dark, explore controls, tables, and a flowchart
Native text	bun --hot native-text.tsx	Compare Markdown, code, and native diff rendering
Paint	bun --hot paint.tsx	Draw, erase, make shapes, undo / redo
ANSI log	bun --hot ansi-log.tsx	Stream colored output into a selectable virtualized log
Multiple windows	bun --hot window-resize.tsx	Resize two independent desktop windows

Browse all examples, including error boundaries, file opening, single-instance apps, and macOS window vibrancy. To regenerate the curated screenshots on macOS or Windows, run bun scripts/screenshots.ts after building the repository.

Quick start

Install Bun and create a project. The npm packages include prebuilt native binaries; you can start an app without compiling Rust.

mkdir my-gpuiv-app
cd my-gpuiv-app
bun init -y
bun add @gpuiv/vue vue

Set these compiler options in tsconfig.json so Bun's JSX transform uses Vue:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "jsx": "react-jsx",
    "jsxImportSource": "vue",
    "strict": true,
    "skipLibCheck": true
  }
}

Copy examples/shims.d.ts into your project as gpuiv.d.ts for editor and tsc checks. Vue's default JSX types describe HTML/SVG; these declarations allow GPUIV's native props and slot children.

Create app.tsx:

import { defineComponent, ref } from 'vue'
import { createApp } from '@gpuiv/vue'

const App = defineComponent({
  setup() {
    const count = ref(0)
    return () => (
      <div style={{
        display: 'flex', flexDirection: 'column', gap: 16,
        padding: 32, width: '100%', height: '100%',
        backgroundColor: '#18181b', color: '#fafafa',
      }}>
        <text style={{ fontSize: 24, fontWeight: 600 }}>Hello, GPUIV</text>
        <div
          onClick={() => count.value++}
          style={{
            padding: 16, borderRadius: 12, backgroundColor: '#2563eb',
            cursor: 'pointer', hover: { backgroundColor: '#1d4ed8' },
          }}
        >
          <text>{`Count: ${count.value}`}</text>
        </div>
      </div>
    )
  },
})

createApp(App, { title: 'My first GPUIV app', width: 640, height: 400 })

Run it:

bun --hot app.tsx

Click to update the counter. Save the file to remount the app in the same desktop window. For component-level Fast Refresh that preserves other components' state, add the HMR preload.

GPUIV uses its own elements and a supported subset of CSS-style properties; it is not a drop-in renderer for existing HTML applications. Start with <div> for layout and <text> for content, then consult the elements, styles, and events references when adapting an interface.

How it works

Vue 3 components and state
          │ changed host mutations, one atomic batch per flush
          ▼
napi-rs → Rust RetainedTree → GPUI layout and GPU painting
                              ├─ Metal   (macOS)
                              ├─ DirectX (Windows)
                              └─ Vulkan  (Linux)

Vue computes the update; Rust retains the element tree; GPUI builds the frame. Input events travel in the opposite direction, from GPUI back to your Vue handlers. Read the renderer architecture for the mutation protocol, retained tree, and event flow.

Status

GPUIV is an experimental, self-maintained Vue 3 fork. It is suitable for exploring GPUI-based desktop interfaces; check platform-specific APIs and the full feature checklist before choosing it for your app.

Platform	Renderer	Prebuilt binaries	GPU tests / screenshots
macOS	Metal	Apple Silicon and Intel	Available
Windows	DirectX	ARM64 and x64	Available
Linux	Vulkan	ARM64 and x64 (GNU)	Live-window automation available; offscreen GPU tests/screenshots unavailable

Menus and vibrancy are macOS-specific; global shortcuts and tray icons/menus currently support macOS and Windows. On Linux the native addon enables both Wayland and X11: GPUI selects Wayland when WAYLAND_DISPLAY is non-empty, otherwise X11 when DISPLAY is; to force X11 under XWayland start with env -u WAYLAND_DISPLAY. Application windows and live-window automation work on both backends, but the offscreen GPU test renderer and its PNG capture remain unavailable on Linux. Wayland also supports layer-shell surfaces for panels, docks, and wallpapers.

Nested scrolling is currently unsupported. App packaging is a workspace tool for macOS .app bundles, Windows portable executables, and Linux x64/ARM64 .tar.gz archives; signing, notarization, Linux AppImage output, and Linux self-update are still pending. See packaging and the full feature checklist for current boundaries.

Documentation

I want to…	Go to
Look up a component, style, or event	API reference
Automate and test my app	Automation · GPU-backed tests
Debug updates or enable Fast Refresh	Runtime errors · Hot reload · Vue DevTools
Package a desktop app	Packaging guide
Understand Vue → Rust → GPUI	Renderer architecture
Build or contribute to GPUIV	Development guide · Contributor rules
Check support and known gaps	Feature status · Upstream tracking

Relationship to upstream GPUIX

GPUIV is a self-maintained fork of remorses/gpuix, created for experimentation and learning. Upstream GPUIX provides Node.js and React bindings for GPUI; this fork replaces the React-facing package with a Vue 3 custom renderer, published as @gpuiv/vue and @gpuiv/native.

The Rust/napi-rs layer, retained tree, mutation protocol, native elements, and testing approach originate in GPUIX. The fork's synced changes and deliberate differences are recorded in the upstream ledger. Ported code from Comet and other projects is credited in third-party notices.

License

Apache-2.0