Svelte on the desktop

Write Svelte components as you would for the browser, and get a native desktop window instead. @blender-ui/svelte mounts Svelte 5 components into BUI: runes, snippets, bindings, transitions and {#each} blocks work as they do on the web, BUI draws the result on the CPU or the GPU, and Blender’s widgets are one import away. No Electron, no webview.

Svelte is already fine-grained: a $state change updates the one node that shows it, and that’s what BUI sends to its UI thread. Your component code is plain Svelte.

Install

npm install @blender-ui/svelte svelte
# or
bun add @blender-ui/svelte svelte

It brings @blender-ui/native with it. Svelte 5.57 or newer is a peer dependency, and Node.js needs to be 22.15 or newer (Bun works too). The native addon is prebuilt for Windows x64; on Linux, build it from source.

Your first component

<script>
  import { Button } from '@blender-ui/svelte'
  let count = $state(0)
</script>

<main class="p-6 flex flex-col gap-3 bg-[#2b2b2b] text-[#e6e6e6]">
  <span>Clicks: {count}</span>
  <Button onclick={() => count++}>Add one</Button>
</main>

import { render } from '@blender-ui/svelte'
import Counter from './Counter.svelte'

render(Counter, { title: 'Counter', width: 360, height: 200, gpu: true })

Run it:

node --import @blender-ui/svelte/register app.js
# or
bun --preload @blender-ui/svelte/register app.js

register teaches the runtime two things: .svelte files (and .svelte.js rune modules) import as compiled components, and svelte resolves to its browser build. Both are cached in node_modules/.cache/@blender-ui/svelte: compiled components, so later starts skip Svelte’s compiler, and, when Bun is installed, Svelte’s runtime bundled into a few modules on the first run, so it loads like one. With Bun you can put the preload in bunfig.toml instead: preload = ["@blender-ui/svelte/register"].

render and createRoot

render(Component, options) opens a window and mounts the component into it. It returns { app, window, root, component }, where component holds the component’s exports.

window is a @blender-ui/native window, so you can style its body directly:

const { window } = render(Counter, { title: 'BUI + Svelte', width: 420, height: 260 })
window.body.setAttribute('styled', '')        // Blender's look for every element
window.body.className = 'm-0 bg-[#2b2b2b] text-[#e6e6e6]'

To mount into a window you opened yourself, use createRoot(window), then root.render(Component, { props }) and root.unmount(). Closing the window unmounts its root (onDestroy runs). For tests, act(fn) runs fn and applies Svelte’s pending updates at once (flushSync).

Elements, events and bindings

Elements are HTML elements, as in the browser:

• class takes Tailwind classes, and class={{ on: active }} objects and arrays work. style takes a string; style:color={c} directives work.
• Mouse, keyboard and form events work: onclick, onmousedown, onmouseup, onmousemove, onmouseenter, onmouseleave, onwheel, onkeydown, onkeyup, oninput and onchange. They bubble, and stopPropagation works. Svelte delegates most of them to the window’s body, as on the web.
• Bindings: bind:value, bind:checked, bind:group and bind:this work.
• Blocks: {#if}, {#each} (keyed too), {#await}, {#key} and snippets with {@render} work, and so do context, onMount and onDestroy.
• Transitions (transition:, in:, out:) run their start and end, without animating in between, for now: an outro removes its element at once.

Blender’s widgets

Import Blender’s widgets as components. They’re always drawn and handled the Blender way: drag a number to change it, Ctrl to snap, and click to type a value or a sum such as 2*pi.

<script>
  import { NumberSlider, Button } from '@blender-ui/svelte'
  let size = $state(2.5)
</script>

<main class="p-4 flex flex-col gap-2">
  <NumberSlider min={0} max={10} value={size} oninput={(e) => (size = Number(e.target.value))} />
  <Button onclick={() => console.log('apply', size)}>Apply</Button>
</main>

The ten components are Button, Checkbox, Radio, NumberField, NumberSlider, TextField, TextArea, ColorSwatch, Dropdown and ProgressBar. Each is an HTML element underneath (NumberSlider is an <input type="range">), so it takes the same attributes and events. Their lowercase twins (<button>, <input>) look like a browser’s controls, except inside a styled element.

Styles

A component’s <style> block works: Svelte scopes it to the component, and BUI adds each component’s stylesheet to a window once, however many instances it shows. Tailwind classes and style attributes work everywhere, as in the other bindings.

Signals

Runes are the way to hold state in Svelte, and they’re already fine-grained. For state that lives outside components, @blender-ui/svelte exports BUI’s signals (signal, computed, effect, batch, untrack, createSignal, ref). You can use one two ways:

• As a value ({label}, style={style}, class={cls}, title={label}): the node is bound to the signal. A write updates that node straight away, without Svelte running at all, which is the cheapest update there is.
• As a store ($count): the component follows it like any other Svelte state, so you can compute with it ({$selection.length} selected).

<script>
  import { selection, status } from './store.js' // signal([]), signal('Ready')
</script>

<span>{status}</span>
<p>{$selection.length} selected</p>

Standalone apps

bui build bundles .svelte files too: the Svelte package registers its bundler plugin with bui, so there’s nothing to configure.

npx bui build app.js           # app.exe: BUI + QuickJS, one small file
npx bui build app.js --bun     # app.exe: a Bun executable
npx bui run app.js             # run on the QuickJS runtime, no build

See standalone executables for the options.

Performance

The same scenes from Svelte and from the React binding, measured in one session:

• Signals as values are the cheapest update: the node is bound to the signal, so a write skips Svelte.
• Runes go through Svelte’s flush, which visits the component’s effects; with thousands of rows that’s tens of microseconds per update on Node.js and Bun.
• Built with bui build, a Svelte app reaches its first frame in under 100 ms. On Node.js and Bun, register serves Svelte’s runtime bundled, so a start costs little more.

The benchmarks page has the method and the full table.

How it works

Svelte has no custom-renderer API: a compiled component calls the DOM directly (createElement, cloneNode, insertBefore, addEventListener …). @blender-ui/native provides that DOM, and the few functions Svelte’s templates call on every update (text, attributes, class, style) write straight into BUI’s nodes. document makes detached nodes that join a window’s retained tree when they’re inserted into it, comments and empty text nodes act as anchors without taking any space, and only the changes of each tick cross to BUI’s UI thread. Nodes Svelte drops are freed natively at the end of the tick.

Components are compiled with fragments: 'tree', so templates are built with createElement rather than an HTML parser.

Next steps