Browser-Only XML Formatter with DOMParser and Syntax Highlighting

#javascript #xml #webdev #tools

Formatting XML usually means installing a library. I built a zero-dependency XML formatter using the browser's built-in DOMParser.

Try it: https://devnestio.pages.dev/xml-formatter/

Parsing with DOMParser

function parseXml(text) {
  const parser = new DOMParser();
  const doc = parser.parseFromString(text, 'application/xml');
  const err = doc.querySelector('parsererror');
  if (err) throw new Error(err.textContent.trim().slice(0, 200));
  return doc;
}

No regex hacks — real XML parsing with proper error detection.

Recursive formatter with syntax highlighting

function formatNode(node, indent, indentChar) {
  if (node.nodeType === Node.COMMENT_NODE)
    return indent + `<span class="x-comment">&lt;!--${escHtml(node.nodeValue)}--&gt;</span>\n`;
  if (node.nodeType !== Node.ELEMENT_NODE) return '';
  const tag = node.tagName;
  let attrs = '';
  for (const attr of node.attributes)
    attrs += ` <span class="x-attr">${escHtml(attr.name)}</span>=<span class="x-val">"${escHtml(attr.value)}"</span>`;
  // recurse into children...
}