Canvas UI launches open-source component library using HTML-in-Canvas API

David Haz has released Canvas UI, an open-source component library built on the experimental HTML-in-Canvas API. The library provides 35 components, such as fluid, fire, and glass lens effects, which utilize WebGPU via WGSL and WebGL via GLSL. Unlike traditional methods that render static bitmaps, Canvas UI uses Chrome’s HTML-in-Canvas API to layout real-time DOM within a canvas, allowing text to remain selectable and links to remain clickable.

To achieve full functionality, users currently need to enable the ‘canvas-draw-element’ flag in Chrome. The components are distributed as source code through a shadcn-compatible registry rather than standard packages. While the technology enables advanced visual effects, it has sparked discussion regarding browser monopoly, as the specific API required for these interactive effects is currently exclusive to Chrome and not yet implemented in Safari or Firefox.

Other related projects include Shaders, which offers WebGPU effects as declarative components for frameworks like React, Vue, Svelte, and Solid. Shaders provides over 200 effects and includes a design editor to export component trees directly into code.