HTMLNodeMapper is a web-based tool that generates an interactive graph representation of an HTML document’s structure. It visualizes elements, styles, scripts, and relationships between them, helping users understand and analyze the HTML hierarchy.
- Upload an HTML file to generate its structure map.
- Interactive visualization using D3.js.
- Identifies and links:
- Inline styles to respective elements.
- JavaScript-modified styles and their effects.
- Stylesheet rules and the elements they apply to.
- Script functions, variables, and function calls.
- Displays detailed information about selected nodes.
- Supports zooming, panning, and dragging nodes.
- Clicking on a node opens up the code in a side view and hides all other connections except for the ones attached to the selected node.
- Contains offline access and PWA support!
No installation required. Open HTMLNodeMapper.html in a browser, or use the GitHub Pages.
- Open
index.htmlin a web browser. - Click the Upload button and select an HTML file.
- View the generated interactive structure map.
- Click on nodes to see additional details.
- Use zoom and drag interactions to explore the graph.
- D3.js v7
- Standard HTML5, JavaScript, and CSS.
- DOM Parsing: The tool reads and analyzes the uploaded HTML file.
- Graph Construction: Elements, styles, and scripts are extracted and linked.
- Interactive Visualization: The relationships between elements, styles, and scripts are displayed as a graph.
Feel free to contribute by submitting issues or pull requests.
This project is open-source and available under the MIT License.