About

This tool performs a lossless conversion between HTML and JSONML (JSON Markup Language). Unlike standard JSON representations of the DOM which can be verbose, JSONML offers a compact, array-based syntax that maps directly to XML/HTML structures. It is widely used in client-side templating engines due to its lightweight footprint and ease of traversal.

The converter utilizes the browser's native DOMParser to interpret HTML, ensuring that even malformed markup is handled according to standard web parsing rules. For the reverse operation, it recursively reconstructs the DOM tree from the nested array structure, ensuring attribute integrity and correct hierarchy.

Formulas

The core logic follows the JSONML specification structure defined recursively:

Element = [ TagName, (optional) Attributes, …Children ]

Where Children is a set of Strings or nested Elements. The transformation function f operates as:

f(node) =

{

text if node is Text[tag, attr, map(f, nodes)] otherwise

Reference Data

Feature	HTML Representation	JSONML Representation
Basic Element	<div></div>	["div"]
With Attributes	<span id='x'></span>	["span", {"id":"x"}]
Text Content	<p>Hello</p>	["p", "Hello"]
Nested Children	<ul><li>A</li></ul>	["ul", ["li", "A"]]
Mixed Content	<p>A <b>B</b></p>	["p", "A ", ["b", "B"]]

Frequently Asked Questions

JSONML is significantly more compact. Standard JSON DOM trees often use explicit keys like "tagName", "children", and "attributes" for every node. JSONML uses array position (index 0 is the tag, index 1 is attributes), reducing file size and parsing overhead.

By default, the DOMParser may preserve whitespace text nodes (line breaks, spaces) depending on the configuration. This tool includes a "Trim Whitespace" option to remove empty text nodes, resulting in a cleaner JSONML array.

Yes. If you paste a full document, the tool will parse from the root tag. However, be aware that the browser's DOMParser might automatically move some elements (like script or style tags) if the structure is invalid.

Yes, JSONML is designed to be lossless for structure and attributes. Converting HTML → JSONML → HTML should yield the same DOM structure, though attribute order and self-closing tag syntax (e.g.,
vs
) may vary slightly based on standard normalization.