Repository files navigation

A Visual Studio Code extension that allows you to debug your HTML files in a 3D perspective. Perfect for visualizing the structure of your HTML documents and exploring the spatial relationships between elements.

• 3D Visualization: View your HTML documents in a 3D space.

  ⚠️ Important: this only works if your HTML has a body tag!

• Custom Stacking: Render stack of elements byDOM,Z-INDEX orBOTH

• Reload on Save: Any saved changes will automatically be reflected in the renderer

• Quick HTML Change: Changes rendered HTML based on which editor is active (as long as its a valid HTML)

• View Element Details View information about the element's position, size, layer, etc.

To install the3D HTML Viewer extension, follow these steps:

1. Open Visual Studio Code.
2. Go to the Extensions view by clicking on the Extensions icon in the Activity Bar.
3. Search for "3D HTML Viewer" by Aizhe.
4. ClickInstall.

1. Open an HTML file in VS Code.
2. PressCtrl+Shift+3 (Windows/Linux) orCmd(⌘)+Shift+3 (Mac) to activate the 3D viewer.
3. Customize the view using the available settings.

For more info you can read theguide

If you encounter any issues or have suggestions for improvements, please visit theGitHub repository and submit an issue or pull request.

See changeloghere

Uses GPL-3.0 Licensed code fromdom3d.js by OrionReed which this project is based on.

GPL-3.0 © Aizhe 2024