Uploaded July 2026 | Updated September 2026, 2 weeks ago

---

Put real DOM inside WebGL - buttons, forms, live text - and drop shader effects straight on top 🚀 Two Basement Studio devs show the production dead-ends they hit syncing DOM and WebGL, and the experimental proposal that finally kills the beautiful-vs-accessible trade-off ⚙️

What's inside:
🔍 Real DOM inside a canvas: shader effects on actual buttons, forms, and text
🔍 The scroll trick that locks DOM and WebGL together - no drift, no clipping
🔍 Why WebGL text costs ~150 lines today, and how HTML in Canvas kills it (experimental, behind a flag)

🎙️ Tomas Ferreras is a developer at Basement Studio (known for high-end, WebGL-driven websites), specializing in React, Three.js and WebXR. He pushes the boundaries of the web with shaders and open-source graphics.

🎙️ Santiago Colombatto is a frontend developer at Basement Studio. He makes traditional UI and GPU graphics coexist - getting the DOM and WebGL to move as one.

Connect with Tomas:
🔗 twitter.com/tfdev__
Connect with Santiago:
🔗 twitter.com/sanco_dev

📝 Talk: HTML in Canvas: Bridging UI and GPU on the Web | Santiago Colombatto & Tomas Ferreras

This talk was recorded at JSNation Amsterdam 2026:
🔗 jsnation.com/?utm_source=youtube&utm_medium=SantiagoColombatto_TomasFerreras

📌 Follow the link to watch the full version of all the conference talks, QnA’s with speakers and hands-on workshop recordings:

🔗 gitnation.com/events/jsnation-2026?utm_source=youtube&utm_medium=SantiagoColombatto_TomasFerreras

🕐 Timestamps:
00:00 - The gap nobody warns you about
00:54 - Your 20% Off 🫣
01:28 - WebGL and shaders in plain English
03:39 - It looks gorgeous - here's the hidden cost
04:03 - Scroll: where DOM and WebGL drift apart
04:57 - Three fixes, three new problems
06:44 - The ugly truth: you're rebuilding the browser
07:29 - Inside the canvas, screen readers go blind
08:16 - 150 lines of code just to render text
09:45 - The workaround trap
10:36 - Enter HTML in Canvas: real buttons inside WebGL
11:00 - The whole proposal: 1 attribute, 2 methods, 1 event
12:28 - Shaders on real DOM - and the scroll problem vanishes
14:18 - Real HTML in 3D: the WebXR demos
15:38 - Beautiful or accessible? No longer a choice

📌 We’ve hidden a secret code for 20% off your next event.
Join our upcoming conferences!

💫 JSNation US 2026 Nov 16 & 19, 2026 (NewYork & Online)
🔗 jsnation.us/?utm_source=youtube&utm_medium=SantiagoColombatto_TomasFerreras

💫 React Summit US 2026 Nov 17 & 20, 2026 (NewYork & Online)
🔗 reactsummit.us/?utm_source=youtube&utm_medium=SantiagoColombatto_TomasFerreras

💫 AI Coding Summit Nov 16 & 17, 2026 (New York & Online)
aicodingsummit.com/nyc/?utm_source=youtube&utm_medium=SantiagoColombatto_TomasFerreras

and more!

🚀 Check out all the upcoming events from GitNation:
🔗 gitnation.com/events?utm_source=youtube&utm_medium=SantiagoColombatto_TomasFerreras

Don't forget to use INSIDER20 promo code for 20% off on tickets.



#JSNation #GitNation #webgl #threejs #creativedeveloper #creativecoding #frontenddeveloper #javascript #shaders #glsl #webdevelopment #webdev #htmlincanvas #canvas #gpurendering #webgraphics #reactjs #nextjs #webxr #frontend #uidevelopment #interactiveweb #codenewbie #devcommunity #programming #techtalk