Back to Devoured - July 24, 2026
DEVOURED
Canvas UI (GitHub Repo)

Canvas UI (GitHub Repo)

Tech frontendwebopensource GitHub
Canvas UI is a new open-source library that renders interactive, framework-agnostic components directly onto WebGL canvases while maintaining DOM clickability.
What: Developed for React, Solid, Preact, Vue, and Svelte, Canvas UI uses the experimental `html-in-canvas` API to overlay 3D and fluid simulations onto live interfaces. It includes 25 components, is shadcn-compatible, and is licensed under MIT with the Commons Clause.
Why it matters: This signals a trend in creative frontend development where developers are moving beyond standard CSS animations toward high-performance GPU-accelerated interfaces that remain integrated with standard web accessibility.
Takeaway: Add a component by running `npx shadcn@latest add @canvas-ui/liquid-react` after enabling the `chrome://flags/#canvas-draw-element` flag in Chrome or Edge 140+.
Decoder
  • html-in-canvas: An experimental browser API allowing WebGL effects to read and mirror live DOM elements into a canvas context, enabling GPU-accelerated distortions on interactive UI.
  • Commons Clause: A license add-on that permits free use of source code but restricts the ability to sell the software itself as a standalone product.
Original article

What makes it different

Most of the library is built on the experimental html-in-canvas API, which lets WebGL effects read and redraw your live DOM. Text stays selectable, links stay clickable, and the whole page becomes a texture that fire, fluid, and glass can distort in real time.

Where html-in-canvas is not supported, components degrade gracefully to pure WebGL overlays, so every visitor gets a working page.

  • 25 components and counting: Liquid, Blaze, Glass, Shatter, VHS, Particle Reveal, and more
  • Framework agnostic: React, Solid, Preact, Vue, Svelte, and vanilla JS builds for every component
  • Copy, do not install: components ship as source through a shadcn-compatible registry
  • Zero config: each component is self-contained with sensible defaults and typed props
  • MCP ready: point the shadcn MCP server at the registry and let your AI assistant install components

Quick start

Add a component with the shadcn CLI (run npx shadcn@latest init first if you have not used it before):

npx shadcn@latest add @canvas-ui/liquid-react

Swap liquid for any component and react for solid, preact, vue, svelte, or vanilla. The source lands in components/canvasui/ in your project, yours to edit.

Browser support

The full html-in-canvas experience currently requires Chrome or Edge 140+ with the chrome://flags/#canvas-draw-element flag enabled. Everywhere else, components automatically fall back to WebGL overlay rendering.

Development

This repo contains the library source (src/lib), the documentation site (Next.js 16, Tailwind v4, deployed to Cloudflare Workers), and the registry build.

npm install
npm run dev        # builds the registry, then starts next dev
npm run build      # production build
npm run deploy     # build and deploy to Cloudflare

Contributing

Issues and pull requests are welcome.

License

MIT + Commons Clause. Free to use in your own projects, commercial or not. The Commons Clause only restricts selling the library itself.

Explore all 60 articles in today's digest

Fresh dev news, AI-digested daily. Never miss a trend at devoured.fyi