# html-dom-visualize
A simple HTML to Tree Diagram library that outputs HTML DOM as image for visualization. Supports custom DOM elements filtering and masking. Uses [plotly](https://github.com/plotly/plotly.py) underlying for graph generation.
Useful when analyzing elements composition of HTML documents or developing tools that manipulates HTML DOM structures.
## Install
```
pip install html-dom-visualize
```
## Using as python library
#### Basic Usage
```python
from html_dom_visualize import html_dom_visualize
# Directly load html
html_dom_visualize(html="<html>...</html>", show=True)
# Load URL
html_dom_visualize(url="https://github.com", show=True)
# Load html file
html_dom_visualize(file_path="./github.html", show=True)
```
#### Using branch filtering & element masking
```python
html = """
<html>
<body>
<h1>
<span>My First Heading</span>
</h1>
<div>
<p>My first paragraph.</p>
<button>
<div>click me</div>
<span>some texts</span>
</button>
<div>
<div>
<span>some other texts</span>
</div>
</div>
</div>
</body>
</html>
"""
# This masks all 'button' tags (remove their descendents), and only show the inner texts in the visualization.
html_dom_visualize(
html=html,
should_mask=lambda el: el.name == 'button',
mask_fn=lambda el: el.get_text(),
show=True
)
# This filter out all branches that does NOT contains a <h1> tag
html_dom_visualize(
html=html,
should_mask=lambda el: el.name == 'button',
mask_fn=lambda el: el.get_text(),
show=True
)
```
## Using in Command line
```sh
options:
-h, --help show this help message and exit
-u URL, --url URL URL of the HTML page to analyze
-f FILE, --file FILE Path to local HTML file to analyze
-b BRANCH, --branch BRANCH
Element tags that if included, their
ancestors and all their descendants
would be preserved. Multiple tags can
be specified If not specified, all
elements will be preserved.
-m MASK, --mask MASK Element tags that if included, they
will be masked from the output graph
such that their children will be
removed, and only the inner texts will
be preserved. Multiple tags can be
specified. If not specified, no tags
will be masked.
-o OUTPUT, --output OUTPUT
Output file path for the visualization.
If not provided, the visualization will
be displayed in the browser.
--show Display the visualization in the
browser. If provided, the visualization
will be displayed.
example:
# only include branches that contains <button> / <input>
# mask out children inside <button> and <a>
html-dom-visualize -f ./webpage.html -b button -b input -m a -m button
# load from URL, show after rendered, and save to ./google.png
html-dom-visualize -u https://google.com --show -o ./google.png
```
## Output
It outputs a TreeMap type of graph, generated by [plotly](https://github.com/plotly/plotly.py). If using interactive mode, the diagram can be interactive such that it display details upon mouse hover, and able to zoom in/out if the DOM level beyonds default limit.
##### Sample full DOM of a google.com
##### Sample masked DOM of github.com
Raw data
{
"_id": null,
"home_page": "https://github.com/lokwkin/html-dom-visualize",
"name": "html-dom-visualize",
"maintainer": null,
"docs_url": null,
"requires_python": "<4.0,>=3.8",
"maintainer_email": null,
"keywords": "dom, html, visualization, tree, diagram, html-dom-visualize",
"author": "lokwkin",
"author_email": "lokwkin@gmail.com",
"download_url": "https://files.pythonhosted.org/packages/e1/9a/ea211b27bc0e2641948e1bcf23034fda8860e5ce87d2cdbaa04dfcd29abf/html_dom_visualize-0.2.7.tar.gz",
"platform": null,
"description": "# html-dom-visualize\nA simple HTML to Tree Diagram library that outputs HTML DOM as image for visualization. Supports custom DOM elements filtering and masking. Uses [plotly](https://github.com/plotly/plotly.py) underlying for graph generation.\n\nUseful when analyzing elements composition of HTML documents or developing tools that manipulates HTML DOM structures.\n\n## Install\n```\npip install html-dom-visualize\n```\n\n## Using as python library\n\n#### Basic Usage\n```python\nfrom html_dom_visualize import html_dom_visualize\n\n# Directly load html\nhtml_dom_visualize(html=\"<html>...</html>\", show=True)\n# Load URL\nhtml_dom_visualize(url=\"https://github.com\", show=True)\n# Load html file\nhtml_dom_visualize(file_path=\"./github.html\", show=True)\n```\n\n#### Using branch filtering & element masking\n```python\nhtml = \"\"\"\n<html>\n <body>\n <h1>\n <span>My First Heading</span>\n </h1>\n <div>\n <p>My first paragraph.</p>\n <button>\n <div>click me</div>\n <span>some texts</span>\n </button>\n <div>\n <div>\n <span>some other texts</span>\n </div>\n </div>\n </div>\n </body>\n</html>\n\"\"\"\n\n# This masks all 'button' tags (remove their descendents), and only show the inner texts in the visualization.\nhtml_dom_visualize(\n html=html,\n should_mask=lambda el: el.name == 'button', \n mask_fn=lambda el: el.get_text(),\n show=True\n)\n\n# This filter out all branches that does NOT contains a <h1> tag\nhtml_dom_visualize(\n html=html,\n should_mask=lambda el: el.name == 'button', \n mask_fn=lambda el: el.get_text(),\n show=True\n)\n```\n\n## Using in Command line\n```sh\noptions:\n -h, --help show this help message and exit\n -u URL, --url URL URL of the HTML page to analyze\n -f FILE, --file FILE Path to local HTML file to analyze\n -b BRANCH, --branch BRANCH\n Element tags that if included, their\n ancestors and all their descendants\n would be preserved. Multiple tags can\n be specified If not specified, all\n elements will be preserved.\n -m MASK, --mask MASK Element tags that if included, they\n will be masked from the output graph\n such that their children will be\n removed, and only the inner texts will\n be preserved. Multiple tags can be\n specified. If not specified, no tags\n will be masked.\n -o OUTPUT, --output OUTPUT\n Output file path for the visualization.\n If not provided, the visualization will\n be displayed in the browser.\n --show Display the visualization in the\n browser. If provided, the visualization\n will be displayed.\n\nexample:\n# only include branches that contains <button> / <input>\n# mask out children inside <button> and <a>\nhtml-dom-visualize -f ./webpage.html -b button -b input -m a -m button\n\n# load from URL, show after rendered, and save to ./google.png\nhtml-dom-visualize -u https://google.com --show -o ./google.png\n```\n\n## Output\nIt outputs a TreeMap type of graph, generated by [plotly](https://github.com/plotly/plotly.py). If using interactive mode, the diagram can be interactive such that it display details upon mouse hover, and able to zoom in/out if the DOM level beyonds default limit.\n\n##### Sample full DOM of a google.com\n\n\n##### Sample masked DOM of github.com\n",
"bugtrack_url": null,
"license": "MIT",
"summary": "A simple HTML to Tree Diagram library that outputs HTML DOM as image for visualization.",
"version": "0.2.7",
"project_urls": {
"Homepage": "https://github.com/lokwkin/html-dom-visualize",
"Repository": "https://github.com/lokwkin/html-dom-visualize"
},
"split_keywords": [
"dom",
" html",
" visualization",
" tree",
" diagram",
" html-dom-visualize"
],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "97ef27bfa6d62e8f845955b64135bbec016f78ebc3d087f9060e2ea7d65f4cdb",
"md5": "b558f58eb487f379ecc662856d2c8d3a",
"sha256": "ed536422555a885633d184b3396434763f92e174757bd469105ff5069566ef16"
},
"downloads": -1,
"filename": "html_dom_visualize-0.2.7-py3-none-any.whl",
"has_sig": false,
"md5_digest": "b558f58eb487f379ecc662856d2c8d3a",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": "<4.0,>=3.8",
"size": 7286,
"upload_time": "2024-07-22T10:19:21",
"upload_time_iso_8601": "2024-07-22T10:19:21.308950Z",
"url": "https://files.pythonhosted.org/packages/97/ef/27bfa6d62e8f845955b64135bbec016f78ebc3d087f9060e2ea7d65f4cdb/html_dom_visualize-0.2.7-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "e19aea211b27bc0e2641948e1bcf23034fda8860e5ce87d2cdbaa04dfcd29abf",
"md5": "dfc3eae5fb507e6b0e102b60191a53a5",
"sha256": "26991792fb39474ad141fb751fa5a87acbd3d686e7f97a02d085c4ba82c59132"
},
"downloads": -1,
"filename": "html_dom_visualize-0.2.7.tar.gz",
"has_sig": false,
"md5_digest": "dfc3eae5fb507e6b0e102b60191a53a5",
"packagetype": "sdist",
"python_version": "source",
"requires_python": "<4.0,>=3.8",
"size": 5987,
"upload_time": "2024-07-22T10:19:22",
"upload_time_iso_8601": "2024-07-22T10:19:22.817033Z",
"url": "https://files.pythonhosted.org/packages/e1/9a/ea211b27bc0e2641948e1bcf23034fda8860e5ce87d2cdbaa04dfcd29abf/html_dom_visualize-0.2.7.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2024-07-22 10:19:22",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "lokwkin",
"github_project": "html-dom-visualize",
"travis_ci": false,
"coveralls": false,
"github_actions": false,
"requirements": [],
"lcname": "html-dom-visualize"
}
JSON
