GPUIV

Build native desktop apps with Vue 3 and TypeScript.

GPUIV renders your Vue components through GPUI, the GPU UI framework behind Zed. Use Vue reactivity, TSX, and native desktop APIs to build chat clients, editors, dashboards, and developer tools. Rendering runs on Metal, DirectX, or Vulkan.

Quick start · Examples · API reference · Build from source

A working chat UI with virtualized messages, selectable Markdown, highlighted diffs, and animated panels. Explore the source or run the demo. Replies use demo data.

What you can build

• Content-rich tools: native Markdown, syntax-highlighted code, virtualized diffs, ANSI logs, text selection, and a Markdown WYSIWYG editor.
• Interactive interfaces: inputs and IME support, keyboard navigation, headless Select / Combobox / Tooltip / Collapsible controls, and animations.
• Desktop workflows: multiple windows, file dialogs, clipboard access, menus, tray icons, global shortcuts, and file / deep-link delivery.
• Custom visuals: images, SVGs, and a Canvas 2D API with paths, gradients, compositing, and PNG export.
• Testable apps: drive native input with a Playwright-like automation API, inspect painted text, take screenshots, and capture exact animation frames.

Vue updates send only changed elements to Rust. GPUI handles layout and GPU painting. Read how the renderer works when you need the details.

Examples

These screenshots are captured from the actual examples with the native GPU test renderer on macOS. Click an image to view it at full size.

Markdown editor	Component gallery
Editable blocks, Markdown source mode, search, and outline navigation. Source · bun --hot markdown-editor.tsx	Light/dark themes and a gallery of native controls. Source · bun --hot beautiful-ui.tsx The Beautiful UI package is a private workspace demo.

Canvas compositing

Draw and composite through getContext("2d"). Source. Run bun --hot canvas-blends.tsx, or try the paint app with brush strokes, shapes, 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 native windows

Browse all examples, including error boundaries, file opening, single-instance apps, and macOS window vibrancy.

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 native window. For component-level Fast Refresh that preserves other components' state, add the HMR preload.

GPUIV uses native elements and a supported subset of CSS-style properties. Start with <div> for layout and <text> for content; consult the elements, styles, and events when adapting a browser UI.

Status

GPUIV is an experimental, self-maintained Vue 3 fork. It is suitable for exploring native desktop UIs; 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)	Not yet

Menus and vibrancy are macOS-specific. Nested scrolling is currently unsupported. App packaging is a workspace tool for macOS .app bundles and Windows portable executables; signing, notarization, and Linux packaging are still pending. See packaging and remaining engineering work.

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 personal 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