◼">Declarative Canvas UI for the browser, inspired by Swift — Martín Romañuk<br>I read this post and immediately started wondering how it would look. I didn’t know that Google Spreadsheets use canvas to render their UI, or that Figma does too.<br>Now it seems pretty obvious. A few years ago I would have stopped right there, but now we have LLM agents at our disposal.

The article mentions these 4 reasons to use it for UIs:

Fast

Control

Consistency

Portability

All of this sounds like a canvas — pun very much intended — to build multiplatform apps, for web, desktop, or mobile.

Basically, I followed the post’s advice and built WeaveKit, a declarative Canvas UI toolkit.

If you’re interested, you can check out WeaveKit. The syntax is heavily inspired by SwiftUI.<br>It’s just syntactic sugar on top, using dslToJs().

VStack {<br>Text('Hello, world')<br>.font({ size: 28, weight: 700 })<br>.padding(20)<br>running on this very same page:

It’s possible to wire up a button and state.

Reactive example

const clicks = signal(0)

VStack {<br>spacing: 10<br>align: 'leading'<br>Text(() => 'clicks: ' + clicks())<br>.font({ size: 26, weight: 700 })<br>.foreground('#fafafa')<br>Button('+1', () => clicks.set(n => n + 1))<br>.padding(20)

' style="height:200px"><br>This part wires and mount everything:

// dslToJs rewrites the blocks to plain JS; new Function puts the<br>// toolkit in scope. Runs once — the signal is created here, not<br>// per frame — and the trailing expression is returned implicitly.<br>const buildView = new Function(<br>'Button', 'Text', 'VStack', 'signal',<br>dslToJs(source).code,<br>const view = buildView(Button, Text, VStack, signal)

mount(document.getElementById('app'), createCanvasBackend(), () => view)<br>Give it a spin — clone WeaveKit and run the examples in your own page.

Comments<br>Comments require JavaScript.

Name<br>Comment<br>SubmitComments are moderated and appear after approval.