Introducing Canvas UI - The First Ever html-in-canvas Component Library

[DavidHDev]

Hey all 👋

Today I'm releasing a new special project: Canvas UI, an open source library of creative components built on the experimental html-in-canvas API. The first of its kind.

What it does

Your DOM becomes a WebGL texture, shaders distort, dissolve, and refract your real page in real time, while everything stays fully interactive. Text stays selectable, links stay clickable. Where html-in-canvas isn't supported, components degrade gracefully to pure WebGL overlays. The library also contains some 3D component goodies.

What's in it

• 24 components at launch - Liquid, Blaze, Glass, Shatter, VHS, Particle Reveal, Cloth, Ripple, Droplets, and more
• Framework agnostic - React, Vue, Svelte, and vanilla TS builds for every component
• Copy, don't install - components ship as source via a shadcn-compatible registry:

  npx shadcn@latest add https://canvasui.dev/r/liquid-react.json
  

AI-ready

We've got MCP server support thanks to shadcn, "Copy for AI" (prompts, configured code, markdown) on every docs page, llms.txt, open in ChatGPT/Claude/v0.

Links

🌐 Site: https://canvasui.dev/
📚 Docs: https://canvasui.dev/docs
🎮 Playground: https://canvasui.dev/playground
⭐ Repo: https://github.com/DavidHDev/canvas-ui

It's free, and just getting started. Feedback, issues, and PRs are all very welcome, and if you build something with it, I'd love to see it!

[davekiss]

Looks killer, going to try this on a project I'm in the middle of right now! Thanks for sharing.

[Salman053]

wow great man we come everytime with something great things