Loading video...
Video Failed to Load
Introducing Canvas UI, the first ever html-in-canvas component library. Your DOM is the render target now. Real-time shaders over real, interactive UI. 24 components. React, Vue, Svelte, vanilla TS. Free. Open source. 🧵
1,426,916 views • 3 months ago •via X (Twitter)
73 Comments

This wasn't possible until now. The tech literally didn't exist. html-in-canvas lets shaders read and redraw your real DOM in real time, while text stays selectable and links stay clickable. Everyone else has demos. This is a full library. A new dimension for the web. Literally.

24 components at launch: Liquid. Blaze. Glass. Shatter. VHS. Particle Reveal. Cloth. Ripple. Droplets... Each one a single command. No package, no dependency, the source lands in your project, yours to edit.

Probably the most AI-ready component library out there: ▸ shadcn registry + MCP: agents browse & install everything ▸ Copy for AI everywhere: prompts, configured code, markdown docs ▸ Open any page in ChatGPT, Claude, or v0 ▸ llms.txt built in ⭐

The browsers shipped the tech, but it was virtually untouched until now, and i hate to be dramatic but this is groundbreaking man I think hex float blew my mind the most We're going to see some really crazy landing pages come out in the next 6 months 🔥

Man thank you, this means a lot! It’s only the start, with broader browser support in the future, this will be the next big thing, I’m sure.

We are exploring HTML-in-Canvas as a native React API (or R3F API if native does not make sense). DM me if you are interested in being part of it!

That sounds great, the only thing is, I want to keep this lib framework/library-agnostic! Interested to see what you will build though!

It would be great to get your input all the same. It is an opportunity to give feedback to Google on the API.

Great demos. Btw, I would make the popover that tells me I'm missing the Chrome feature flag more prominent. I almost missed it.

Will do!

I covered Canvas UI in my latest video:

I’m gonna need to sit down for this one! Thanks for making a special video for it ❤️

One of the coolest projects I’ve seen in a long time! Big congrats

Thanks a lot man, means a lot! ☀️

omg can't believe how good is this, you cooooooked!

The craziest @shadcn registry just dropped 👀 Thanks man!

Nice, it took us almost 16 years to have Flash player tech once again.

Flash player tech, but make it modern 🤓

Fire.

Finally. HTML- in-canvas is so cool. Truly a shame most browsers still don’t have support (let’s not even think about mobile). Just stuck in Demo world for now but this is GOATED

We’ll get there.

I KNEW IT Congrats David, this looks amazing!! 🔥

Hehe! Next up is adding nuqs! 👀 Thank you!

Haha I was just thinking about that while playing with the controls 🫶

Don’t you dare think I forgot about it!

Idles for tech demo vid lmao, pretty good. 🔥🔥🔥

Real recognizes real 🫡 I had to do it!

🔥🔥🔥

🙏

holy shit you weren't joking when you said what you were going to announce would be crazy

Yessir, I’m glad you think so!

CRAZY!!

Thank you bro! Much love.

looks amazing!

also will be very glad if you check out our new project 🤝 any feedback will help a lot

Holy fgggg

@Adrian_Stevens for vis - imagine the @rootappofficial apps you could build with this

incredible! me and @digitalben3030 have been obsessed with dithering lately. we sidequested and opensourced today using Canvas UI.

Amazing work, love this! 😍

Tysm! 🙏

I'm taking some inspiration from your work. 😊

Crazy 💥

Thank you!!

Very cool. Been using reactbits components for a long time now! Keep the great work :)

Thank you! 🙏

This + ChatGPT Work sites🔥🔥🔥

why is it free?!

@zenohosting Because open source rules. Enjoy!

you're taking contributions ;P?

@zenohosting of course! Feel free to explore the repo.

I was gonna go sleep! Are you advising I tinker more?! I’m building some datasets

@zenohosting Sleep is important haha

yeah i need a refresher soon but i'll go peek. do you think this dataset can help with UI design Ai stuff?!

@lavrton

What

Yes

Mind blown. Must dive in.

Looks like a whole new trend’s about to kick off. Congrats! 🎉 And if the performance ends up solid, that’d make it even better.

Doing my best to make these performant! Thank you!

Love to see Vue support from day one! 🙏💪

Yessir! React, Vue, Svelte, or just raw TS. Sky is the limit.

really nice work

Thank you! 🫡

impressive work man🔥

Thank you!

This page where we can see all the animated components is amazing—congratulations.

Looks incredible! I work a lot with threejs in my job so I've been keeping a close eye on html-in-canvas. I hope it gets out of canary and get proper support soon in other browsers

I hope so too, would be huge!

now this is cool, i wonder how it performs on older devices or mobile?

Did my best, but since it's open source, we can all improve it in time.

oh boy

so good!

Thank you Paul! 🫡

