We Kept Rebuilding the Browser in WebGL - Turns Out We Don't Have To

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: 🔗 https://twitter.com/tfdev__ Connect with Santiago: 🔗 https://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: 🔗 https://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: 🔗 https://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) 🔗 https://jsnation.us/?utm_source=youtube&utm_medium=SantiagoColombatto_TomasFerreras 💫 React Summit US 2026 Nov 17 & 20, 2026 (NewYork & Online) 🔗 https://reactsummit.us/?utm_source=youtube&utm_medium=SantiagoColombatto_TomasFerreras 💫 AI Coding Summit Nov 16 & 17, 2026 (New York & Online) https://aicodingsummit.com/nyc/?utm_source=youtube&utm_medium=SantiagoColombatto_TomasFerreras and more! 🚀 Check out all the upcoming events from GitNation: 🔗 https://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