{"slug": "declarative-canvas-ui-for-the-browser-inspired-by-swift", "title": "Declarative Canvas UI for the browser, inspired by Swift", "summary": "WeaveKit, a declarative Canvas UI toolkit inspired by SwiftUI, has been released on GitHub by developer pixdeo, enabling developers to build fast, controllable, consistent, and portable web, desktop, and mobile interfaces using a Swift-like syntax that compiles to JavaScript via dslToJs(). The toolkit, which leverages LLM agents in its development, supports reactive state and can be mounted in any browser page, as demonstrated in the accompanying examples.", "body_md": "# Declarative Canvas UI for the browser, inspired by Swift\n\nI read [this post](https://hivekit.io/blog/why-you-might-want-to-build-your-webapp-in-canvas-instead-of-html/) 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.\nNow it seems pretty obvious. A few years ago I would have stopped right there, but now we have LLM agents at our disposal.\n\nThe article mentions these 4 reasons to use it for UIs:\n\n- Fast\n- Control\n- Consistency\n- Portability\n\nAll of this sounds like a canvas — pun very much intended — to build multiplatform apps, for web, desktop, or mobile.\n\nBasically, I followed the post’s advice and built [WeaveKit](https://github.com/pixdeo/weavekit), a declarative Canvas UI toolkit.\n\nIf you’re interested, you can check out [WeaveKit](https://github.com/pixdeo/weavekit). The syntax is heavily inspired by SwiftUI.\nIt’s just syntactic sugar on top, using `dslToJs()`\n\n.\n\n```\nVStack {\n  Text('Hello, world')\n    .font({ size: 28, weight: 700 })\n}\n.padding(20)\n```\n\nrunning on this very same page:\n\nIt’s possible to wire up a button and state.\n\n# Reactive example\n\n``` js\nconst clicks = signal(0)\n\nVStack {\n  spacing: 10\n  align: 'leading'\n  Text(() => 'clicks: ' + clicks())\n    .font({ size: 26, weight: 700 })\n    .foreground('#fafafa')\n  Button('+1', () => clicks.set(n => n + 1))\n}\n.padding(20)\n```\n\nThis part wires and mount everything:\n\n```\n// dslToJs rewrites the blocks to plain JS; new Function puts the\n// toolkit in scope. Runs once — the signal is created here, not\n// per frame — and the trailing expression is returned implicitly.\nconst buildView = new Function(\n  'Button', 'Text', 'VStack', 'signal',\n  dslToJs(source).code,\n)\nconst view = buildView(Button, Text, VStack, signal)\n\nmount(document.getElementById('app'), createCanvasBackend(), () => view)\n```\n\nGive it a spin — clone [WeaveKit](https://github.com/pixdeo/weavekit) and run the examples in your own page.", "url": "https://wpnews.pro/news/declarative-canvas-ui-for-the-browser-inspired-by-swift", "canonical_source": "https://romanuk.org/declarative-canvas-ui-for-the-browser-inspired-by-swift/", "published_at": "2026-08-11 18:27:42+00:00", "updated_at": "2026-08-11 18:43:04.201838+00:00", "lang": "en", "topics": ["developer-tools", "generative-ai"], "entities": ["WeaveKit", "pixdeo", "SwiftUI", "GitHub", "HiveKit"], "alternates": {"html": "https://wpnews.pro/news/declarative-canvas-ui-for-the-browser-inspired-by-swift", "markdown": "https://wpnews.pro/news/declarative-canvas-ui-for-the-browser-inspired-by-swift.md", "text": "https://wpnews.pro/news/declarative-canvas-ui-for-the-browser-inspired-by-swift.txt", "jsonld": "https://wpnews.pro/news/declarative-canvas-ui-for-the-browser-inspired-by-swift.jsonld"}}