Modern web development still relies on a strong separation between HTML/CSS for UI and Canvas/WebGL for rendering. In practice, combining both often leads to complex synchronization logic and a series of workarounds.
In this talk, we’ll first walk through how these problems are typically solved today — including scroll synchronization, frame loop timing, scissor-based rendering, and mapping DOM elements into a WebGL scene — and why these approaches tend to be fragile and hard to scale.
Using a set of experiments and websites developed at basement.studio, we’ll show these patterns in practice, combining real layouts with shaders and interactive effects.
From there, we’ll introduce HTML-in-Canvas and show how it simplifies many of these problems — not as a finalized solution, but as a direction that removes the need for most of the synchronization and rendering workarounds we rely on today.
We’ll also cover the challenges of building UI directly in WebGL, where layout, text, and interactivity become difficult to manage, especially in environments like WebXR.
This talk has been presented at JSNation 2026, check out the latest edition of this JavaScript Conference.
