Skip to main content

A simple HTML to Tree Diagram library that outputs HTML DOM as image for visualization.

Project description

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

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

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

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

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

html_dom_visualize-0.2.7.tar.gz (6.0 kB view details)

Uploaded Source

Built Distribution

html_dom_visualize-0.2.7-py3-none-any.whl (7.3 kB view details)

Uploaded Python 3

File details

Details for the file html_dom_visualize-0.2.7.tar.gz.

File metadata

  • Download URL: html_dom_visualize-0.2.7.tar.gz
  • Upload date:
  • Size: 6.0 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? No
  • Uploaded via: poetry/1.8.3 CPython/3.12.4 Darwin/23.5.0

File hashes

Hashes for html_dom_visualize-0.2.7.tar.gz
Algorithm Hash digest
SHA256 26991792fb39474ad141fb751fa5a87acbd3d686e7f97a02d085c4ba82c59132
MD5 dfc3eae5fb507e6b0e102b60191a53a5
BLAKE2b-256 e19aea211b27bc0e2641948e1bcf23034fda8860e5ce87d2cdbaa04dfcd29abf

See more details on using hashes here.

File details

Details for the file html_dom_visualize-0.2.7-py3-none-any.whl.

File metadata

File hashes

Hashes for html_dom_visualize-0.2.7-py3-none-any.whl
Algorithm Hash digest
SHA256 ed536422555a885633d184b3396434763f92e174757bd469105ff5069566ef16
MD5 b558f58eb487f379ecc662856d2c8d3a
BLAKE2b-256 97ef27bfa6d62e8f845955b64135bbec016f78ebc3d087f9060e2ea7d65f4cdb

See more details on using hashes here.

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page