{"id":907587,"date":"2026-09-24T07:50:10","date_gmt":"2026-09-24T07:50:10","guid":{"rendered":"https:\/\/www.newsbeep.com\/ca\/907587\/"},"modified":"2026-09-24T07:50:10","modified_gmt":"2026-09-24T07:50:10","slug":"canvas-ui-ships-35-html-in-canvas-components-that-run-webgl-and-webgpu-effects-over-live-dom","status":"publish","type":"post","link":"https:\/\/www.newsbeep.com\/ca\/907587\/","title":{"rendered":"Canvas UI Ships 35 HTML-in-Canvas Components That Run WebGL and WebGPU Effects Over Live DOM"},"content":{"rendered":"

Canvas UI<\/a>, an open source component library from React Bits<\/a> creator David Haz, has launched as the first library built on the experimental HTML-in-Canvas API<\/a>, running GPU effects over real, interactive page content.<\/p>\n

The library ships 35 components<\/a>, including pointer-driven fluid, fire, glass lenses, ASCII filters, VHS grain and particle reveals. Every effect has a WebGL build using GLSL and a WebGPU build<\/a> using WGSL through vgpu<\/a>, with wrappers for React, Solid, Preact, Vue, Svelte and dependency-free vanilla TypeScript.<\/p>\n

Rather than painting a dead bitmap, most components use Chrome’s html-in-canvas API to lay out live DOM inside a canvas, capture it with drawElementImage, upload it as a texture and distort it in a shader. Text stays selectable, links stay clickable, and the content stays in the accessibility tree<\/a>. Components are distributed as source through a shadcn-compatible registry rather than as a package:<\/p>\n


\nnpx shadcn@latest add @canvas-ui\/liquid-react <\/p>\n

The full experience needs Chrome with the canvas-draw-element flag, or an origin trial<\/a> token, which runs from Chrome 148 through 150 and is bound to a single domain. Elsewhere, html-in-canvas effects fall back to a plain GPU overlay or render the wrapped content unchanged, and the 3D object components work everywhere.<\/p>\n

Because code is copied into the repository, upgrades mean re-running the install command and reconciling local edits. Switching renderers is mostly replacing the installed file with the -webgpu registry item, which adds vgpu and @webgpu\/types. The project also documents<\/a> that Chrome 150’s changes to texElementImage2D and copyElementImageToTexture require no migration, since capture happens through the 2D API and uploads use standard texImage2D or copyExternalImageToTexture.<\/p>\n

shadcn called it one of the most impressive registries<\/a> they have seen, and the Chrome for Developers<\/a> account said it was good to see html-in-canvas empowering new frameworks. Writing a detailed teardown<\/a>, Flavio Copes praised the unglamorous engineering: the Liquid component stops its loop with IntersectionObserver when off-screen, honours prefers-reduced-motion, and releases textures, programs and listeners on unmount. His advice was to use one strong effect rather than six, and to avoid dashboards, checkout flows and documentation sites.<\/p>\n

On Hacker News<\/a>, one commenter responded to a demo’s banner with scepticism about a Google-only capability:<\/p>\n

<\/p>\n

Use Chrome… and aren’t we supposed to reject these technologies that allow Google to Embrace, Extend, Extinguish?

\nKudos to the artist in spite of this unfortunately esoteric (wish it weren’t) concern<\/p>\n

<\/p>\n

Another user replied:<\/p>\n

<\/p>\n

The standardization process requires implementations before standardization. And the most recent comments on the WHATWG issue are from Jake Archibald (Mozilla) and Anne van Kesteren (Apple). This isn’t a unilateral Google project.<\/p>\n

<\/p>\n

Accessibility discussion in the WICG explainer<\/a> is still open, including how drawable subtrees without updated geometry are exposed.<\/p>\n

Paper Shaders<\/a> offers zero-dependency canvas shaders installed from npm, but they sit behind or around content as texture. React Bits, from the same author, animates DOM directly. Canvas UI is the only option using the page itself as shader input, which is also why it depends on a feature that Safari and Firefox do not implement.<\/p>\n

Licensing is MIT plus the Commons Clause, so commercial use is allowed but reselling the components is not. The repository<\/a> has passed 4,600 stars, and the registry is MCP-ready<\/a>, letting assistants browse and install components through the shadcn MCP server.<\/p>\n","protected":false},"excerpt":{"rendered":"Canvas UI, an open source component library from React Bits creator David Haz, has launched as the first…\n","protected":false},"author":2,"featured_media":907588,"comment_status":"","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[49,48,313568,4113,17541,31277,61,31278,313569],"class_list":["post-907587","post","type-post","status-publish","format-standard","has-post-thumbnail","category-technology","tag-ca","tag-canada","tag-canvas-ui-webgl","tag-development","tag-html","tag-javascript","tag-technology","tag-web-development","tag-webgl"],"_links":{"self":[{"href":"https:\/\/www.newsbeep.com\/ca\/wp-json\/wp\/v2\/posts\/907587","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.newsbeep.com\/ca\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.newsbeep.com\/ca\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.newsbeep.com\/ca\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.newsbeep.com\/ca\/wp-json\/wp\/v2\/comments?post=907587"}],"version-history":[{"count":0,"href":"https:\/\/www.newsbeep.com\/ca\/wp-json\/wp\/v2\/posts\/907587\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.newsbeep.com\/ca\/wp-json\/wp\/v2\/media\/907588"}],"wp:attachment":[{"href":"https:\/\/www.newsbeep.com\/ca\/wp-json\/wp\/v2\/media?parent=907587"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.newsbeep.com\/ca\/wp-json\/wp\/v2\/categories?post=907587"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.newsbeep.com\/ca\/wp-json\/wp\/v2\/tags?post=907587"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}