User Rating 0.0 ★★★★★

Total Usage 0 times

Category HTML/XML Utilities

HTML Input

Trim whitespace nodes Include comments Always include attrs object Pretty print output

Presets:

JsonML Output

Is this tool helpful?

Your feedback helps us improve.

★ ★ ★ ★ ★

About

JsonML (JSON Markup Language) represents DOM trees as nested arrays: the tag name occupies index 0, an optional attributes object sits at index 1, and child nodes fill the remaining positions. Getting the conversion wrong - dropping attributes, collapsing whitespace text nodes, or mishandling self-closing tags - produces arrays that cannot round-trip back to valid markup. This tool parses your HTML through the browser's native DOMParser, then performs a recursive depth-first traversal with configurable filters for comments, whitespace, and node exclusion. It approximates standard JsonML per jsonml.org, assuming well-formed input; malformed HTML is silently corrected by the parser, which may rearrange nodes.

Formulas

The DOM-to-JsonML conversion follows a recursive traversal algorithm. For each node N in the DOM tree:

{

JsonML(N) = "N.textContent" if N.nodeType = 3JsonML(N) = [tag, {attrs}, ...map(children, JsonML)] if N.nodeType = 1JsonML(N) = ["!--", N.data] if N.nodeType = 8

Where tag = N.tagName.toLowerCase(), attrs is a plain object built from N.attributes (omitted if empty), and children is the ordered list of N.childNodes. The recursion depth is bounded by d_max = 512 to prevent stack overflow on pathological input. Whitespace-only text nodes matching the pattern RegExp(/^\s+$/) are excluded when trimming is enabled.

Reference Data

DOM Node Type	nodeType Value	JsonML Representation	Example Input	Example Output
Element	1	["tag", {attrs}, ...children]	<div class="x">hi</div>	["div",{"class":"x"},"hi"]
Text	3	"string"	Hello world	"Hello world"
Comment	8	["!--", "text"] (optional)	<!-- note -->	["!--"," note "]
CDATA Section	4	"string" (text content)	<![CDATA[data]]>	"data"
Document	9	Children processed from body	<html>...</html>	["html", ...]
Document Fragment	11	Array of children	(fragment)	[...children]
Processing Instruction	7	Skipped	<?xml ...?>	(omitted)
Attribute (standalone)	2	Key-value in attrs object	id="main"	{"id":"main"}
Void Element	1	["tag", {attrs}] (no children)	<br/>	["br"]
Whitespace-only Text	3	Omitted if trim enabled	\n \t	(omitted)
Nested Elements	1	Recursive arrays	<ul><li>A</li></ul>	["ul",["li","A"]]
Multiple Attributes	1	All in attrs object	<a href="#" class="x">	["a",{"href":"#","class":"x"}]
Mixed Content	1	Strings + arrays interleaved	<p>A<b>B</b>C</p>	["p","A",["b","B"],"C"]
Empty Element	1	["tag"] or ["tag", {}]	<span></span>	["span"]
Boolean Attribute	2	{"attr": ""}	<input disabled>	["input",{"disabled":""}]

Frequently Asked Questions

The tool uses the browser's native DOMParser, which applies HTML5 error-recovery rules. Missing closing tags are auto-inserted, mis-nested elements are rearranged, and unrecognized tags are treated as unknown HTMLElement nodes. The resulting JsonML reflects the parser-corrected DOM, not the raw input string. Inspect the output to verify the parser didn't restructure your markup.

By default, comments are excluded because the original JsonML specification does not define a comment representation. When you enable the "Include Comments" option, comment nodes are serialized as ["!--", "comment text"], following a common community convention. Note that conditional comments (IE-specific) are parsed as regular comments by modern browsers.

Per the JsonML specification, the attributes object at index 1 is optional. This converter omits it entirely when the element has zero attributes, producing a shorter array like ["br"] instead of ["br", {}]. You can toggle "Always Include Attributes Object" to force the object even when empty - useful if your downstream parser expects a fixed schema at index 1.

Indentation and line breaks between tags produce text nodes containing only whitespace characters (spaces, tabs, newlines). With "Trim Whitespace Nodes" enabled, any text node matching /^\s+$/ is dropped from the output. Disabling this option preserves all text nodes verbatim, which may be required for pre-formatted content or when whitespace is semantically significant (e.g., inside

 or  tags).

Yes. JsonML is designed for lossless round-tripping. The array structure preserves tag names, attribute key-value pairs, and child ordering. You can reconstruct the DOM by recursively creating elements with document.createElement, setting attributes, and appending children. Whitespace and comment fidelity depends on whether those nodes were included during the initial conversion.

The converter processes input synchronously in the main thread. For typical HTML documents up to approximately 500 KB, conversion completes under 100 ms. Beyond 1 MB, you may experience noticeable delay. The recursion depth limit is set at 512 levels to prevent stack overflow. Extremely deep nesting beyond this threshold will produce a truncated result with a warning.