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...

Full description

Saved in:
Bibliographic Details
Published in:Proceedings of VISSOFT (Online) pp. 127 - 132
Main Author: Moreno-Lumbreras, David
Format: Conference Proceeding
Language:English
Published: IEEE 06.10.2024
Subjects:
Cognitive load
Complexity theory
Debugging
DOM
extended reality
html
Productivity
Real-time systems
Research and development
Software
software visualization
Streaming media
Three-dimensional displays
Visualization
web
ISSN:2832-6555
Online Access:Get full text
Tags: Add Tag
No Tags, Be the first to tag this record!
Description
Summary: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
ISSN:2832-6555
DOI:10.1109/VISSOFT64034.2024.00025