HTML Input

JSON Output

What Is an HTML to JSON Converter?

An HTML to JSON converter parses HTML markup and outputs a structured JSON element tree. Each node in the output represents an HTML element with its tag name, attributes object, text content, and array of child nodes — making the DOM structure machine-readable.

This representation is useful for programmatic HTML processing, scraping pipelines, testing DOM structure, and feeding HTML into systems that consume JSON. The conversion uses the browser's built-in DOMParser API for accurate parsing.

How to Convert HTML to JSON

Follow these three steps to parse HTML into a JSON element tree.

Paste or Upload HTML

Paste your HTML into the left HTML Input panel, or click Upload. Click Sample to load an example.

View JSON Output

The right panel shows the parsed JSON tree. Each element has tag, attrs, children, and optional text fields.

Copy or Download

Click Copy to copy the JSON to your clipboard, or Download to save it as a .json file.

When to Use HTML to JSON

Web Scraping Pipelines

Convert scraped HTML pages into JSON for easier downstream processing in Python, Node.js, or any language with JSON support.

DOM Structure Testing

Use the JSON representation of an HTML document to write assertions about element structure in automated tests.

Content Migration

When migrating content from HTML-based CMSes to headless systems, parse the HTML to JSON and transform it into the target format.

API Response Transformation

Some APIs return HTML fragments. Parse them to JSON to extract specific data fields programmatically.

Common Questions

What does the JSON output look like?

Each HTML element is represented as {"tag":"div","attrs":{"class":"hero"},"children":[...],"text":""}. Text nodes appear as {"tag":"#text","text":"Hello"}.

Does it handle the full HTML document?

Yes. If you paste a complete HTML document (with <!DOCTYPE>, <html>, <head>, <body>), the full tree is output. For a fragment, just the fragment nodes are returned.

Are comments included?

HTML comments are included as nodes with "tag":"#comment" and the comment text.

Is the JSON valid?

Yes. The output is always valid, pretty-printed JSON with 2-space indentation.

Is my HTML stored?

No. Parsing happens locally in your browser using the built-in DOMParser. Nothing is sent to a server.

Related HTML & Data Tools

More tools for parsing and converting HTML: