HTML to JSON

Parse any HTML snippet into a structured JSON tree that captures every element tag, its attributes, and its text node children. Toggle whether to include attribute objects or inline text nodes, and optionally extract only the direct children of the body root. Parsing uses the browser's native DOMParser, so results are accurate and no data leaves your machine.

Input

HTML

Parse Options

Output

Output

JSON

What is HTML to JSON Converter?

Extract structured JSON data from HTML documents using CSS selectors or convert the full HTML DOM tree into a JSON representation, all in your browser — no upload, no account required. This browser-based tool is used by web scrapers, data extractors, and developers who need to parse table data, list items, or custom elements from HTML snippets. You can target specific elements with CSS selectors and choose which attributes and text content to extract as JSON keys. It also converts the entire DOM tree into a nested JSON object for structural analysis. All parsing is local — your HTML never leaves your browser.

How to Use

  1. 1

    Paste Your HTML

    Paste an HTML snippet or a full document into the input editor. The tool accepts fragments without a DOCTYPE, partial page sections, and complete HTML pages including those copied from browser View Source.

  2. 2

    Set Extraction Mode

    Choose "Full DOM Tree" to convert the complete HTML hierarchy to a JSON tree, or "CSS Selector" mode to target specific elements and extract their text content, attributes, or inner HTML as JSON.

  3. 3

    Extract to JSON

    Click "Convert to JSON". The browser's native DOM parser processes the HTML, and the selected elements or full tree are serialised as a structured JSON object with tag, attributes, text, and children fields.

  4. 4

    Copy or Download

    Copy the JSON output for use in a web scraping pipeline, data analysis script, or API integration — or download it as a .json file for processing with Python, Node.js, or jq.

Common Use Cases

Web Scraping & Data Extraction

Extract structured data from HTML pages — product listings, article metadata, table data — into JSON for further processing in Python scripts, Node.js pipelines, or data analysis tools.

HTML Table to JSON

Convert HTML tables from copied web pages, reports, or email content into JSON arrays for import into spreadsheets, databases, or APIs without manually re-entering the data.

CMS Content Migration

Parse HTML content exported from legacy CMS platforms into a structured JSON representation to assist migration to headless CMS systems like Contentful, Strapi, or Sanity.

DOM Structure Analysis

Convert an HTML fragment to a JSON tree to analyse element hierarchy, attribute usage, and nesting depth during accessibility audits, HTML linting, or template debugging.

Conversion Examples

HTML Table → JSON Array

Header cells become keys; each data row becomes a JSON object.

Input JSON

<table>
  <thead><tr><th>name</th><th>age</th><th>city</th></tr></thead>
  <tbody>
    <tr><td>Alice</td><td>30</td><td>London</td></tr>
    <tr><td>Bob</td><td>25</td><td>Paris</td></tr>
  </tbody>
</table>

Output CSV

[
  {"name": "Alice", "age": "30", "city": "London"},
  {"name": "Bob",   "age": "25", "city": "Paris"}
]

HTML Element → DOM Tree JSON

Full DOM tree mode converts each element to a tag/attributes/children object.

Input JSON

<div class="card">
  <h2>Alice</h2>
  <p class="role">Engineer</p>
</div>

Output CSV

{
  "tag": "div",
  "attributes": {"class": "card"},
  "children": [
    {"tag": "h2", "text": "Alice"},
    {"tag": "p",  "attributes": {"class": "role"}, "text": "Engineer"}
  ]
}

Frequently Asked Questions