Styling XML with CSS: Making Raw Data Readable in the Browser

Browsers treat XML elements as display-inline by default, producing a run-on line of text. With CSS, you can force block layout, add spacing, surface attributes with attr(), and create document-like layouts from raw XML — all without XSLT or server-side transformation.

Practical CSS for XML

Set element selectors to display: block for structural elements. Use attr() in content rules to expose attributes. Hide verbose sections with display: none. Keep CSS modular so you can switch between compact and detailed views. For large XML documents, avoid heavy descendant selectors and limit pseudo-elements on large node sets. This approach is a readability tool, not a full application layer — use XSLT for rich transformations.

Why This Matters in 2026

XML is far from dead in 2026. Enterprise systems, SOAP APIs, SVG graphics, Office document formats, and configuration files all rely on XML. While JSON won the web API war, XML remains essential for document-centric data, enterprise integrations, and systems that require schema validation with XSD. Understanding XML formatting, namespace handling, and conversion between JSON and XML is a valuable skill for any developer working with enterprise or legacy systems.

Key Takeaways

• XML remains essential for SOAP APIs, enterprise systems, and document formats
• Use 2-space indentation for XML formatting — never tabs
• Validate XML against XSD schemas after any transformation
• Handle namespaces carefully — declare at the root element level
• Preserve CDATA sections and comments during formatting operations
• Use streaming parsers for large XML files to avoid memory issues

Common Mistakes to Avoid

• Using tabs instead of spaces for XML indentation — causes parsing issues
• Not declaring namespaces at the root element, causing scope confusion
• Losing CDATA sections during formatting or transformation
• Not validating against XSD after converting from JSON
• Using regex to parse XML — use a proper XML parser instead
• Ignoring character encoding declarations, causing mojibake in output

Best Practices

• Use 2-space indentation consistently for all XML documents
• Keep namespace declarations at the root element level
• Preserve CDATA sections and comment positions during formatting
• Validate XML output against the expected XSD schema before sending
• Use streaming parsers (SAX, StAX) for files larger than 50MB
• Always specify character encoding in the XML declaration

Quick Reference

Here is a quick reference for XML formatting and parsing in JavaScript using the DOMParser API:

// Parse XML in the browser
const parser = new DOMParser();
const doc = parser.parseFromString(xmlString, "text/xml");
const error = doc.querySelector("parsererror");
if (error) console.error("Invalid XML:", error.textContent);

// Format XML with proper indentation
function formatXML(xml) {
  const doc = new DOMParser().parseFromString(xml, "text/xml");
  return new XMLSerializer().serializeToString(doc);
}

// Select elements with namespaces
const elements = doc.getElementsByTagNameNS(
  "http://example.com/ns", "item"
);

Real-World Example

A common enterprise scenario: receiving a SOAP response from a legacy API and extracting the relevant data. Here is how to parse and navigate the XML response safely:

async function callSoapApi(url, body) {
  const res = await fetch(url, {
    method: "POST",
    headers: { "Content-Type": "text/xml; charset=utf-8" },
    body,
  });
  const xmlText = await res.text();
  const doc = new DOMParser().parseFromString(xmlText, "text/xml");

  // Check for SOAP fault
  const fault = doc.querySelector("Fault");
  if (fault) throw new Error("SOAP fault: " + fault.textContent);

  // Extract result
  const result = doc.querySelector("Result");
  return result?.textContent;
}

Tools and Resources

• DevKit XML Formatter — browser-based XML beautifier with namespace support
• DevKit JSON to XML — convert JSON payloads to well-formed XML
• fast-xml-parser — fast Node.js XML parser with bidirectional conversion
• xmllint — command-line XML validator and formatter
• XSD schema validators — validate XML structure against defined schemas

"XML is like violence — if it does not solve your problem, you are not using enough of it. (But seriously, use JSON for APIs.)"

XML remains essential in enterprise environments, SOAP APIs, and document-centric formats. Format with 2-space indentation, validate against XSD schemas, handle namespaces at the root level, and always use a proper XML parser — never regex. When converting between JSON and XML, use clear conventions for attributes and nested structures.