https://github.com/fedebertolini/html-size-visualizer
Visualize an HTML document as a tree and detect the biggest sub-trees
https://github.com/fedebertolini/html-size-visualizer
Last synced: about 1 year ago
JSON representation
Visualize an HTML document as a tree and detect the biggest sub-trees
- Host: GitHub
- URL: https://github.com/fedebertolini/html-size-visualizer
- Owner: fedebertolini
- License: mit
- Created: 2017-11-18T10:56:44.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-04-19T13:03:30.000Z (about 3 years ago)
- Last Synced: 2025-05-20T14:43:41.410Z (about 1 year ago)
- Language: JavaScript
- Size: 445 KB
- Stars: 3
- Watchers: 0
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# html-size-visualizer
## Description
Simple CLI that parses a HTML document and creates a graph representation of the document.
Each HTML tag is represented with a node. Each node is colored depending on its sub-tree's
estimated size (in characters) using a green-red scale, red for the node with the biggest
subtree (always the root `` tag) and green for the smallest leafs.
The graph is intended to detect possible optimizations by trimming out the biggests
sub-trees.
Example:
## Installation
```
npm -g html-size-visualizer
```
## Usage
The CLI requires only one argument: either a URL or a local file path.
To parse a local HTML file:
```
html-size-visualizer myFile.html
```
To parse a website's HTML:
```
html-size-visualizer http://www.example.com
```