The library ships with 35 components, including pointer-driven fluid, fire, glass lenses, ASCII filters, VHS grain, and particle reveals. Every effect includes a WebGL build using GLSL and a WebGPU build using WGSL through vgpu, alongside wrappers for React, Solid, Preact, Vue, Svelte, and dependency-free vanilla TypeScript. Rather than painting a static bitmap, most components use the experimental html-in-canvas API to lay out live DOM inside a canvas, capture it with drawElementImage, upload it as a texture, and distort it within a shader.
Component Library Architecture and Technical Scope
This design preserves native browser accessibility and interactivity. Text remains selectable, links stay clickable, and content stays anchored in the accessibility tree.
Browser Support, Flags, and Rendering Fallbacks
Running the full experience requires Chrome with the canvas-draw-element flag enabled, or an active origin trial token running from Chrome 148 through 150 bound to a single domain. In environments without the flag, html-in-canvas effects fall back to a plain GPU overlay or render wrapped content unchanged, while 3D object components work across all standard environments.
Outside of Chrome, components draw live HTML on canvas by relying on browser capabilities available behind experimental flags. Components that draw live HTML on canvas degrade gracefully so that content renders as regular HTML while visual effects run as a pure GPU overlay on top.
Primitive Primitives and Framework Integrations
At Google I/O 2026, Chrome engineer Thomas Nattestad unveiled the underlying web platform feature. The API introduces three core primitives: a layoutsubtree attribute that lets canvas children participate in layout and hit testing, drawElementImage() to render child elements into canvas contexts, and a paint event that fires when canvas children change to enable efficient updates.
For WebGL implementations, the platform provides texElementImage2D(), while WebGPU relies on copyElementImageToTexture(). Framework integrations are already established, with Three.js and PlayCanvas integrations available. The Three.js implementation added an HTMLTexture class that handles synchronization automatically.
Ecosystem Distribution and Community Reception
Components are distributed as source code through a shadcn-compatible registry rather than a traditional package manager, using installation commands such as npx shadcn@latest add @canvas-ui/liquid-react. Because code is copied directly into the repository, upgrades require re-running the install command and reconciling local edits. Switching renderers involves replacing the installed file with the corresponding -webgpu registry item, which pulls in vgpu and @webgpu/types.
Industry reception has highlighted both the engineering complexity and the platform dependency. shadcn called it one of the most impressive registries they have seen, while the Chrome for Developers account noted that it is good to see html-in-canvas empowering new frameworks. Writing a detailed teardown, Flavio Copes praised the unglamorous engineering, noting that components like the Liquid effect stop their animation loops with IntersectionObserver when off-screen, honor prefers-reduced-motion, and release textures, programs, and listeners upon unmounting.
Licensing, Maintenance, and Standards Context
The project is licensed under MIT plus the Commons Clause, permitting commercial use while restricting the direct reselling of the components themselves. The repository has surpassed 4,600 stars, and the registry is MCP-ready, allowing AI assistants to browse and install components through the shadcn MCP server.
Discussions surrounding the underlying web standard indicate that development is not a unilateral Google project. The standardization process requires browser implementations before formal specs are locked, with recent comments on the WHATWG issue contributed by Jake Archibald from Mozilla and Anne van Kesteren from Apple. Accessibility discussions remain active in the WICG explainer, addressing how drawable subtrees without updated geometry are exposed to assistive technologies.