HTML to JSON Converter — Free Online Tool | JsonFormatter
Convert HTML structure to a JSON DOM tree instantly. Paste HTML, get a structured JSON object with tags, attributes, and children — free, runs in your browser.
Input
JSON Output
What Is an HTML to JSON Converter?
Sometimes you need HTML as structured data — maybe you're building an API that spits out HTML content, or you want to traverse a DOM tree programmatically without spinning up a full headless browser. This tool takes your HTML markup and converts it into a JSON representation of the DOM tree: each element becomes an object with a tag, optional attrs, and a children array. Under the hood it uses the browser's native DOMParser API to parse the HTML, which means the output faithfully reflects how the browser interprets your markup — implicit tags and all.
The resulting JSON follows the JSON specification and is ready to plug straight into any parser or data pipeline. If you'd rather parse HTML server-side in Node.js, check out htmlparser2 on npm or the excellent cheerio.js library. Both are battle-tested and widely used in production scrapers and build tools.
How to Use This Tool
Paste or Upload HTML
Paste your HTML snippet or full page into the left editor. Click Upload to load an HTML file directly, or hit Sample to try a ready-made example.
See the JSON Output
The JSON DOM tree appears in the right panel instantly as you type. Each HTML element is represented as a JSON object with tag, attrs, and children fields.
Copy or Download
Use Copy to grab the JSON or Download to save it as a .json file. To format the output further, paste it into the JSON Formatter tool.
Conversion Example
Here's a quick example of what the conversion looks like. Paste the HTML below and see the JSON tree produced:
HTML input
When You'd Actually Use This
The most common use case is API design — if your backend returns HTML fragments and a frontend team needs to consume them as structured data, this converter shows exactly what the tree looks like. It's also useful when working with Element.children in JavaScript and you want to visualise the hierarchy, or when you're preparing HTML test fixtures and need a reproducible JSON snapshot. Testing APIs with Postman? The JSON output is easy to paste directly into a request body.
For validating the HTML structure before converting, try the HTML Validator first.
Frequently Asked Questions
Does this support full HTML pages, not just snippets?
Yes. Paste a complete <!DOCTYPE html> page and the converter will return a JSON tree of the body element. The head is excluded — the output focuses on the visible content structure.
What does the JSON structure look like?
Each element is an object with a tag (lowercase), an optional attrs object containing all HTML attributes as key-value pairs, and an optional children array. Text nodes appear as { "type": "text", "content": "..." }.
Is any data sent to a server?
No. The conversion runs entirely in your browser using the native DOMParser API. Nothing is uploaded anywhere.
What happens to self-closing tags like <img> or <br>?
Self-closing tags are included as element nodes with their attributes but with no children array, since they have no content. For example, <img src="logo.png" alt="Logo"> becomes { "tag": "img", "attrs": { "src": "logo.png", "alt": "Logo" } }.
Can I use this output with htmlparser2 or cheerio?
This tool uses the browser's DOMParser, so the JSON schema differs slightly from the AST produced by htmlparser2 or cheerio. It's best used for visualisation and quick inspection rather than as a drop-in replacement for those library outputs.
Related Tools
Parsing is done with the browser's native DOMParser API. The output conforms to the JSON specification. For server-side HTML parsing, see htmlparser2 and cheerio.