Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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,428,338 Aufrufe • vor 3 Monaten •via X (Twitter)

73 Kommentare

Profilbild von David Haz
David Hazvor 3 Monaten

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.

Profilbild von David Haz
David Hazvor 3 Monaten

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.

Profilbild von David Haz
David Hazvor 3 Monaten

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 ⭐

Profilbild von grim
grimvor 3 Monaten

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 🔥

Profilbild von David Haz
David Hazvor 3 Monaten

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.

Profilbild von Poimandres
Poimandresvor 3 Monaten

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!

Profilbild von David Haz
David Hazvor 3 Monaten

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

Profilbild von Poimandres
Poimandresvor 3 Monaten

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

Profilbild von Fernando Rojo
Fernando Rojovor 3 Monaten

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

Profilbild von David Haz
David Hazvor 3 Monaten

Will do!

Profilbild von OrcDev
OrcDevvor 3 Monaten

I covered Canvas UI in my latest video:

Profilbild von David Haz
David Hazvor 3 Monaten

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

Profilbild von Dev Ed
Dev Edvor 3 Monaten

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

Profilbild von David Haz
David Hazvor 3 Monaten

Thanks a lot man, means a lot! ☀️

Profilbild von OrcDev
OrcDevvor 3 Monaten

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

Profilbild von David Haz
David Hazvor 3 Monaten

The craziest @shadcn registry just dropped 👀 Thanks man!

Profilbild von Igor Costa
Igor Costavor 3 Monaten

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

Profilbild von David Haz
David Hazvor 3 Monaten

Flash player tech, but make it modern 🤓

Profilbild von Daryl Ginn
Daryl Ginnvor 3 Monaten

Fire.

Profilbild von ORB
ORBvor 3 Monaten

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

Profilbild von David Haz
David Hazvor 3 Monaten

We’ll get there.

Profilbild von François Best
François Bestvor 3 Monaten

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

Profilbild von David Haz
David Hazvor 3 Monaten

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

Profilbild von François Best
François Bestvor 3 Monaten

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

Profilbild von David Haz
David Hazvor 3 Monaten

Don’t you dare think I forgot about it!

Profilbild von Semih Mutlu
Semih Mutluvor 3 Monaten

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

Profilbild von David Haz
David Hazvor 3 Monaten

Real recognizes real 🫡 I had to do it!

Profilbild von nader dabit
nader dabitvor 3 Monaten

🔥🔥🔥

Profilbild von David Haz
David Hazvor 3 Monaten

🙏

Profilbild von grim
grimvor 3 Monaten

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

Profilbild von David Haz
David Hazvor 3 Monaten

Yessir, I’m glad you think so!

Profilbild von Manu Arora
Manu Aroravor 3 Monaten

CRAZY!!

Profilbild von David Haz
David Hazvor 3 Monaten

Thank you bro! Much love.

Profilbild von Tere Labs
Tere Labsvor 3 Monaten

looks amazing!

Profilbild von Tere Labs
Tere Labsvor 3 Monaten

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

Profilbild von Kevin ⨀
Kevin ⨀vor 3 Monaten

Holy fgggg

Profilbild von Spencer Taylor
Spencer Taylorvor 3 Monaten

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

Profilbild von steve caldwell 👨‍🍳
steve caldwell 👨‍🍳vor 3 Monaten

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

Profilbild von Den
Denvor 3 Monaten

Amazing work, love this! 😍

Profilbild von David Haz
David Hazvor 3 Monaten

Tysm! 🙏

Profilbild von Den
Denvor 3 Monaten

I'm taking some inspiration from your work. 😊

Profilbild von 60fps
60fpsvor 3 Monaten

Crazy 💥

Profilbild von David Haz
David Hazvor 3 Monaten

Thank you!!

Profilbild von Sergio Quijano
Sergio Quijanovor 3 Monaten

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

Profilbild von David Haz
David Hazvor 3 Monaten

Thank you! 🙏

Profilbild von 𝓖𝓚
𝓖𝓚vor 3 Monaten

This + ChatGPT Work sites🔥🔥🔥

Profilbild von symbols
symbolsvor 3 Monaten

why is it free?!

Profilbild von David Haz
David Hazvor 3 Monaten

@zenohosting Because open source rules. Enjoy!

Profilbild von symbols
symbolsvor 3 Monaten

you're taking contributions ;P?

Profilbild von David Haz
David Hazvor 3 Monaten

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

Profilbild von symbols
symbolsvor 3 Monaten

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

Profilbild von David Haz
David Hazvor 3 Monaten

@zenohosting Sleep is important haha

Profilbild von symbols
symbolsvor 3 Monaten

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

Profilbild von Sean
Seanvor 3 Monaten

@lavrton

Profilbild von Robert Zapp
Robert Zappvor 3 Monaten

What

Profilbild von David Haz
David Hazvor 3 Monaten

Yes

Profilbild von Robert Zapp
Robert Zappvor 3 Monaten

Mind blown. Must dive in.

Profilbild von YKee
YKeevor 3 Monaten

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.

Profilbild von David Haz
David Hazvor 3 Monaten

Doing my best to make these performant! Thank you!

Profilbild von Nir Galon
Nir Galonvor 3 Monaten

Love to see Vue support from day one! 🙏💪

Profilbild von David Haz
David Hazvor 3 Monaten

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

Profilbild von bart nicolaas
bart nicolaasvor 3 Monaten

really nice work

Profilbild von David Haz
David Hazvor 3 Monaten

Thank you! 🫡

Profilbild von Saïd Aitmbarek
Saïd Aitmbarekvor 3 Monaten

impressive work man🔥

Profilbild von David Haz
David Hazvor 3 Monaten

Thank you!

Profilbild von Jefferson Ramalho
Jefferson Ramalhovor 3 Monaten

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

Profilbild von mint
mintvor 3 Monaten

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

Profilbild von David Haz
David Hazvor 3 Monaten

I hope so too, would be huge!

Profilbild von Christoph
Christophvor 3 Monaten

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

Profilbild von David Haz
David Hazvor 3 Monaten

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

Profilbild von Jay 🦀
Jay 🦀vor 3 Monaten

oh boy

Profilbild von Paul Bakaus
Paul Bakausvor 3 Monaten

so good!

Profilbild von David Haz
David Hazvor 3 Monaten

Thank you Paul! 🫡

Ähnliche Videos