gpuix-svelte

Write desktop apps in Svelte and render them straight into a native, GPU-accelerated window. gpuix-svelte is a Svelte custom renderer for GPUI, the UI framework behind the Zed editor, via @gpuix/native.

!Four gpuix-svelte demos running as native macOS windows

[!WARNING]

Experimental. This is built on Svelte's unreleased

custom renderer API, so every release of this

package ships the exact Svelte build it was tested against (see About the Svelte

version). Expect breaking changes between minor versions.

Quick start

npm create gpuix-svelte@latest my-app
cd my-app
npm install
npm start

A counter opens in its own window. Edit App.svelte and save — the window hot-reloads.

Requirements: Node.js >= 24 or Bun >= 1.4, on macOS (Apple Silicon), Windows (x64) or Linux (x64). The GPUI binary comes prebuilt from npm, so npm install is the whole setup. With Bun, bun create gpuix-svelte my-app then bun run start. Building standalone executables (npm run build) requires Bun, whichever runtime you develop on.

What it looks like

<!-- App.svelte -->
<script lang="ts">
  let count = $state(0);
</script>
<div class="app">
  <text class="count">{count}</text>
  <div class="btn" onclick={() => count++}>Add one</div>
</div>
<style>
  .app { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 32px;
         width: 100%; height: 100%; background-color: #1e1e2e; }
  .count { font-size: 48px; color: #cdd6f4; }
  .btn { padding: 12px 24px; border-radius: 8px; background-color: #313244; color: #cdd6f4; }
  .btn:hover { background-color: #45475a; }
</style>

// app.ts
import { render_hot } from 'gpuix-svelte';
render_hot(new URL('./App.svelte', import.meta.url), { title: 'My app', width: 640, height: 480 });

npx gpuix-svelte app.ts          # Node
npx gpuix-svelte --bun app.ts    # Bun

Runes, snippets, {#each}, {#if}, {#await}, , .svelte.ts state modules and scoped