XML Formatter & Validator
Format, prettify, and validate XML documents locally.
XML Formatter & Validator prettifies and checks XML documents entirely in your browser, with no server round trip. Paste a minified or messy document into the XML Input pane, pick an indent width from 1 to 8 spaces, and Format re-tokenizes every tag so nested structures become readable. Validate runs a separate parse pass and reports success as "✅ Valid XML" or surfaces the exact parser error.
The tool is deliberately small: two actions (Format, Validate), a Clear reset, and copy/download of the result as formatted.xml. Formatting handles self-closing tags, processing instructions like <?xml…?>, doctypes, and comments without inflating indent levels, so real-world documents survive the round trip intact.
How it works
formatXml in lib/xmlBeautifier.ts first collapses whitespace between adjacent tags (>\s*<), then splits the string on /(<[^>]+>)/. A simple stack tracks open tags: each opening token increases indent, each closing token decreases it first, and self-closing, comment, doctype, and processing-instruction tokens are treated as non-indent-increasing. Output lines are padded with ' '.repeat(indentSize) where indentSize is your 1–8 choice.
validateXml prefers the browser's DOMParser: parseFromString(xml, 'text/xml') followed by a querySelector for parsererror, so the message you see comes straight from the engine. When DOMParser is unavailable it falls back to regex stack checks — matching tag counts, balanced angle brackets, and at least one tag present — producing errors like "Mismatched opening and closing tags" or "Mismatched angle brackets". State (input, output, error) lives in xmlBeautifierSlice; nothing is uploaded.
How to use
- Step "Input" — paste XML into "XML Input" (placeholder <root><item>Hello</item></root>).
- Set "Indent Size" to anywhere from 1 to 8 spaces (default 2).
- Click "Format" — prettified XML appears in "Formatted Output" (toast "XML formatted!").
- Or click "Validate" — success shows "✅ Valid XML" (toast "XML is valid!"); failure shows the parser error in the Alert.
- Copy the output or download it as formatted.xml from the output header icon buttons.
- Empty input triggers "Please enter XML to format" or "Please enter XML to validate" — paste content first.
- "Clear" resets input, output, and error together (toast "Cleared!").
Tips
- Validation uses the browser DOMParser first, so error text comes straight from <parsererror> rather than a generic message.
- Indent Size applies only to Format — Validate ignores it and only reports validity.
- Self-closing tags (/>), <?xml…?> declarations, and <!-- comments --> are treated as non-indent-increasing tokens, so they don't cascade the nesting.
- Try Validate before Format on broken documents — you'll get a precise parse error instead of partially reformatted garbage.
XML Formatter & Validator FAQ
How does validation work?
DOMParser parseFromString(xml, 'text/xml') plus a parsererror query, with a regex fallback (tag counts, angle-bracket balance) for non-DOM environments.
What's the indent range?
1 to 8 spaces — the Input field guards v >= 1 && v <= 8, defaulting to 2.
Why did I get "Mismatched angle brackets"?
The fallback checker compares '<' and '>' counts when DOMParser is unavailable; an imbalance triggers that error.
Is my XML uploaded?
No — the CardDescription says documents are formatted "locally in your browser", and all logic is client-side in lib/xmlBeautifier.ts.
What happens to comments and doctypes when formatting?
They're tokenized as non-indent-increasing, so they're preserved on their own lines without nesting subsequent content deeper.
Credits
- DOMParser — Validation via DOMParser with regex fallback; formatting in lib/xmlBeautifier.ts