Enhancing HTML Structure Comprehension: Real-Time 3D/XR Visualization of the DOM

Understanding the Document Object Model (DOM) is crucial for web development, yet traditional 2D representations can obscure the hierarchical complexity and spatial relationships of HTML elements. This paper introduces babia-html, a component of BabiaXR, which offers a novel approach to visualizing the DOM in 3D and XR for the web. Utilizing A-Frame, we develop a tool that provides real-time, three-dimensional representations of HTML structures. Additionally, we present a plugin for Visual Studio Code (VSCode) that integrates this 3D visualization directly into the development environment. Our goal is to explore how this visualization can enhance the comprehension of HTML structures, improve debugging processes, and facilitate more effective communication of structural changes within development teams. We outline the standalone capabilities of babia-html, its integration as a VSCode extension, and various use cases demonstrating its practical applications. This work provides preliminary insights into the potential benefits of 3D DOM visualization and its implications for modern web development practices, considering the potential impact on developer productivity and cognitive load, and proposing directions for future research and development. Video URL: httos://voutu.be/RFX22blBNss