About

Mapping XML to jsTree's JSON format requires precise recursive traversal of the DOM tree. Each XML element becomes a node object with text, children, li_attr, and a_attr properties. Getting the mapping wrong produces a tree that either fails to render or loses critical attribute data. Namespace-heavy documents (SOAP, SVG, XHTML) add another layer: prefixed tag names must be preserved or stripped depending on your jsTree configuration. This converter handles all of it. It parses raw XML via the browser's native DOMParser, walks every element, extracts attributes into the correct jsTree property buckets, and outputs valid JSON ready for $.jstree() initialization.

The tool approximates a standard mapping where element tag names become node text values and attributes populate li_attr. Text-only content nodes append to the parent's text field. This covers the majority of use cases described in the jsTree documentation. Edge cases: self-closing elements produce leaf nodes, CDATA sections are treated as text, and processing instructions are skipped. Mixed content (elements interleaved with text) concatenates text runs. Pro tip: if your XML uses id attributes, they map directly to jsTree's id property for programmatic node access.

Formulas

The conversion follows a recursive mapping function M applied to each XML element node e:

M(e) → { text: tagName(e) + textContent(e), children: [M(c) for each c ∈ childElements(e)], li_attr: attrs(e) }

Where M is the mapping function, e is the current XML element, c represents each child element of e, tagName extracts the element's local or qualified name, textContent extracts direct text child nodes (trimmed, non-empty), and attrs collects all attributes into a key-value object. The id attribute is extracted separately from li_attr and promoted to the top-level id property. If an icon attribute exists, it is promoted to the jsTree icon property.

Node state defaults: opened = FALSE, selected = FALSE, disabled = FALSE. These can be overridden if corresponding XML attributes are detected.

Reference Data

XML Construct	jsTree Property	Behavior
Element tag name	text	Used as display label for the node
Element id attribute	id	Mapped to node ID for programmatic access
Element attributes (non-id)	li_attr	Attached as data attributes on the <li> element
Child elements	children	Recursively converted to child node array
Text node (direct child)	text (appended)	Concatenated to parent element's text label
CDATA section	text (appended)	Treated as plain text content
Comment node	-	Skipped entirely
Processing instruction	-	Skipped (e.g., <?xml ...?>)
Namespace prefix	text	Optionally preserved as ns:tagName
Self-closing element	Leaf node	No children array or empty array
Mixed content	text + children	Text concatenated, elements become children
Empty element	Leaf node	Node with tag name only, no text content
Root element	Top-level node or array	Configurable: wrap in array or use as single root
Deeply nested elements	Nested children	Recursive depth follows XML structure
class attribute	li_attr.class	Preserved for CSS styling in jsTree
data-* attributes	li_attr	Passed through to jsTree's DOM output
icon attribute	icon	If detected, mapped to jsTree icon property
Whitespace-only text	-	Trimmed and ignored if empty after trim
Multiple root elements	Array of nodes	Each root becomes a top-level jsTree node

Frequently Asked Questions

Namespace-prefixed attributes (e.g., xmlns:xsi) are included in li_attr with their full qualified name preserved. The converter does not strip namespace prefixes by default. If you enable the "Strip Namespaces" option, both element tag prefixes and attribute prefixes are removed, leaving only the local name. This is useful for SOAP or SVG documents where namespace cruft would clutter the jsTree display.

Valid XML has exactly one root element. However, if your input is an XML fragment with multiple sibling root elements, the converter wraps them into a JSON array where each root becomes a top-level jsTree node. The output remains valid for jsTree's $.jstree({ core: { data: [...] } }) initialization pattern.

When an element contains both text nodes and child elements (e.g., Hello world), the direct text fragments ("Hello ") are concatenated and appended to the parent node's text property after the tag name. Child elements () become entries in the children array. The text ordering relative to children is not preserved in the flat jsTree model since jsTree is a tree widget, not a rich text renderer.

Yes. The "Text Source" option lets you choose between the element's tag name, a specific attribute value (e.g., name or label), or a combination of tag name plus text content. If the chosen attribute does not exist on a given element, it falls back to the tag name. This is critical for data-oriented XML where tag names are generic (e.g., <item>) but a name attribute carries the meaningful label.

The browser's native DOMParser handles UTF-8 and UTF-16 encoded XML. The <?xml version="1.0" encoding="UTF-8"?> declaration is parsed and discarded (it is a processing instruction, not an element). DTD declarations (<!DOCTYPE>) are parsed by the browser but do not appear in the output tree. Entity references defined in a DTD may not resolve correctly since DOMParser does not fetch external DTD files. Standard entities (&, <, etc.) work as expected.

The practical limit is determined by your browser's memory. DOMParser operates in the main thread and can handle documents up to approximately 50MB on modern hardware without significant delay. Beyond that, parsing time exceeds 2 - 3 seconds and may cause UI jank. For very large files (> 100MB), consider streaming SAX-based parsers outside the browser.