Canvas UI Launches with 35 HTML-in-Canvas Components for GPU Effects on Live DOM

Introduction of Canvas UI

Canvas UI, an open-source component library developed by React Bits creator David Haz, has been released. It is the first library built on the experimental HTML-in-Canvas API, enabling GPU-accelerated visual effects to be applied directly to live, interactive web page content.

Component Features and Functionality

The library includes 35 components, offering effects such as pointer-driven fluid, fire, glass lenses, ASCII filters, VHS grain, and particle reveals. Each effect provides both a WebGL build using GLSL and a WebGPU build using WGSL via vgpu. Wrappers are available for React, Solid, Preact, Vue, Svelte, and vanilla TypeScript.

Unlike traditional methods that render static bitmaps, most Canvas UI components utilize Chrome's html-in-canvas API. This API allows live DOM content to be laid out within a canvas, captured as a texture, and then distorted using a shader. This approach ensures that text remains selectable, links remain clickable, and content stays within the accessibility tree.

Distribution and Browser Compatibility

Components are distributed as source code through a shadcn-compatible registry, rather than as a package. Full functionality, particularly for html-in-canvas effects, requires Chrome with the `canvas-draw-element` flag enabled or an origin trial token, which is active from Chrome 148 through 150 and domain-bound. Without these, html-in-canvas effects fall back to a plain GPU overlay or render content unchanged, though 3D object components function universally.

Industry Reception and Practical Advice

The library has received positive feedback, with shadcn calling it one of the most impressive registries seen, and Chrome for Developers acknowledging its role in empowering new frameworks. Flavio Copes highlighted the engineering details, noting features like IntersectionObserver for off-screen components, `prefers-reduced-motion` support, and proper resource release on unmount. Copes advised using one strong effect rather than multiple and avoiding its use on dashboards, checkout flows, or documentation sites.