Loading video...

Video Failed to Load

Go Home

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

David Haz's profile picture
David Haz3 months ago

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.

David Haz's profile picture
David Haz3 months ago

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.

David Haz's profile picture
David Haz3 months ago

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 ⭐

grim's profile picture
grim3 months ago

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 🔥

David Haz's profile picture
David Haz3 months ago

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.

Poimandres's profile picture
Poimandres3 months ago

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!

David Haz's profile picture
David Haz3 months ago

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

Poimandres's profile picture
Poimandres3 months ago

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

Fernando Rojo's profile picture
Fernando Rojo3 months ago

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

David Haz's profile picture
David Haz3 months ago

Will do!

OrcDev's profile picture
OrcDev3 months ago

I covered Canvas UI in my latest video:

David Haz's profile picture
David Haz3 months ago

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

Dev Ed's profile picture
Dev Ed3 months ago

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

David Haz's profile picture
David Haz3 months ago

Thanks a lot man, means a lot! ☀️

OrcDev's profile picture
OrcDev3 months ago

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

David Haz's profile picture
David Haz3 months ago

The craziest @shadcn registry just dropped 👀 Thanks man!

Igor Costa's profile picture
Igor Costa3 months ago

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

David Haz's profile picture
David Haz3 months ago

Flash player tech, but make it modern 🤓

Daryl Ginn's profile picture
Daryl Ginn3 months ago

Fire.

ORB's profile picture
ORB3 months ago

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

David Haz's profile picture
David Haz3 months ago

We’ll get there.

François Best's profile picture
François Best3 months ago

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

David Haz's profile picture
David Haz3 months ago

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

François Best's profile picture
François Best3 months ago

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

David Haz's profile picture
David Haz3 months ago

Don’t you dare think I forgot about it!

Semih Mutlu's profile picture
Semih Mutlu3 months ago

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

David Haz's profile picture
David Haz3 months ago

Real recognizes real 🫡 I had to do it!

nader dabit's profile picture
nader dabit3 months ago

🔥🔥🔥

David Haz's profile picture
David Haz3 months ago

🙏

grim's profile picture
grim3 months ago

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

David Haz's profile picture
David Haz3 months ago

Yessir, I’m glad you think so!

Manu Arora's profile picture
Manu Arora3 months ago

CRAZY!!

David Haz's profile picture
David Haz3 months ago

Thank you bro! Much love.

Tere Labs's profile picture
Tere Labs3 months ago

looks amazing!

Tere Labs's profile picture
Tere Labs3 months ago

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

Kevin ⨀'s profile picture
Kevin ⨀3 months ago

Holy fgggg

Spencer Taylor's profile picture
Spencer Taylor3 months ago

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

steve caldwell 👨‍🍳's profile picture
steve caldwell 👨‍🍳3 months ago

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

Den's profile picture
Den3 months ago

Amazing work, love this! 😍

David Haz's profile picture
David Haz3 months ago

Tysm! 🙏

Den's profile picture
Den3 months ago

I'm taking some inspiration from your work. 😊

60fps's profile picture
60fps3 months ago

Crazy 💥

David Haz's profile picture
David Haz3 months ago

Thank you!!

Sergio Quijano's profile picture
Sergio Quijano3 months ago

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

David Haz's profile picture
David Haz3 months ago

Thank you! 🙏

𝓖𝓚's profile picture
𝓖𝓚3 months ago

This + ChatGPT Work sites🔥🔥🔥

symbols's profile picture
symbols3 months ago

why is it free?!

David Haz's profile picture
David Haz3 months ago

@zenohosting Because open source rules. Enjoy!

symbols's profile picture
symbols3 months ago

you're taking contributions ;P?

David Haz's profile picture
David Haz3 months ago

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

symbols's profile picture
symbols3 months ago

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

David Haz's profile picture
David Haz3 months ago

@zenohosting Sleep is important haha

symbols's profile picture
symbols3 months ago

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

Sean's profile picture
Sean3 months ago

@lavrton

Robert Zapp's profile picture
Robert Zapp3 months ago

What

David Haz's profile picture
David Haz3 months ago

Yes

Robert Zapp's profile picture
Robert Zapp3 months ago

Mind blown. Must dive in.

YKee's profile picture
YKee3 months ago

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.

David Haz's profile picture
David Haz3 months ago

Doing my best to make these performant! Thank you!

Nir Galon's profile picture
Nir Galon3 months ago

Love to see Vue support from day one! 🙏💪

David Haz's profile picture
David Haz3 months ago

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

bart nicolaas's profile picture
bart nicolaas3 months ago

really nice work

David Haz's profile picture
David Haz3 months ago

Thank you! 🫡

Saïd Aitmbarek's profile picture
Saïd Aitmbarek3 months ago

impressive work man🔥

David Haz's profile picture
David Haz3 months ago

Thank you!

Jefferson Ramalho's profile picture
Jefferson Ramalho3 months ago

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

mint's profile picture
mint3 months ago

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

David Haz's profile picture
David Haz3 months ago

I hope so too, would be huge!

Christoph's profile picture
Christoph3 months ago

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

David Haz's profile picture
David Haz3 months ago

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

Jay 🦀's profile picture
Jay 🦀3 months ago

oh boy

Paul Bakaus's profile picture
Paul Bakaus3 months ago

so good!

David Haz's profile picture
David Haz3 months ago

Thank you Paul! 🫡

Related Videos