XML Tree Size — XML & SOAP Payload Analyzer for VS Code

TL;DR — Right-click any .xml file → instant tree-map showing which elements eat the most bytes. Try the live demo in your browser first — zero install, zero sign-up.

Ever wondered what's bloating that SOAP envelope or XML config?

XML Tree Size gives you the same "what's eating my disk?" experience as TreeSize or WinDirStat — but for XML files, right inside VS Code. No CLI tools, no pasting into online formatters, no leaving your editor.

Built by a developer, for developers. Free, open-source, no telemetry. Your data never leaves your machine.

🚀 Try Before You Install

Not ready to commit? Try the live demo right in your browser — no install, no sign-up, no commitment. Load a sample file or paste your own XML and explore the full tree-size experience instantly. When you're convinced, come back and install with one click.

Why XML Tree Size?

Features

• Interactive tree explorer — expandable nodes showing byte size and percentage of parent
• Detail bar chart — click any node to see its children ranked by size with percentage bars
• Full XML node support — elements, attributes, text content, and CDATA sections
• HSL heat-map coloring — larger nodes get vivid colors, smaller nodes fade to background
• Theme-aware — color scale adjusts automatically for dark, light, and high-contrast themes
• Configurable base color — pick any hex color from the Settings UI color picker
• Expand / Collapse all — toolbar buttons in the tree pane
• Left↔right sync — clicking a bar in the detail pane highlights the tree node
• Open in editor — one-click navigation from any node to its position in the raw XML
• SAX streaming parser — efficient parsing without loading the entire DOM into memory
• 20 languages — localized UI in Spanish, Chinese, Japanese, Korean, French, German, and 14 more

Getting Started

Install

Search for "XML Tree Size" in the VS Code Extensions view (Ctrl+Shift+X / Cmd+Shift+X), or install from the Marketplace.

Option 1 — Right-click an XML file

Right-click any .xml file in the Explorer sidebar and select "XML Tree Size: Analyze".

Option 2 — Command Palette

With an .xml file open, press Ctrl+Shift+P (Cmd+Shift+P on macOS) and type "XML Tree Size: Analyze".

Exploring the results

Click nodes in the tree to see their children ranked by size in the detail pane. The two panels stay in sync — clicking a bar on the right highlights the node on the left, and vice versa. Use Expand / Collapse all to navigate large files, and Open in editor to jump straight to the source.

Settings

Common Use Cases

• SOAP payload optimization — find which elements dominate your WCF/SOAP envelopes and trim them to cut transfer time
• XML config audit — discover why your Maven POM, Spring config, or XSLT stylesheet grew to megabytes
• Web services debugging — spot verbose WSDL responses, oversized CDATA blocks, or redundant namespace declarations
• Data interchange analysis — visualize EDI-XML, HL7, or industry-standard XML feeds to locate bloat
• Log file triage — quickly locate the heaviest elements in structured XML logs

Frequently Asked Questions

Is my data safe? Yes — XML Tree Size runs entirely inside VS Code. Your files are never uploaded, and there is zero telemetry. Try the live demo to verify — it runs 100 % in the browser too.

How does it parse large XML files? It uses a SAX streaming parser, so it never loads the entire DOM into memory. The practical limit is your available memory.

Does it handle namespaces and CDATA? Yes — elements, attributes, text nodes, CDATA sections, and namespace prefixes are all displayed in the tree.

Can I use it with JSON too? Yes — check out the companion extension JSON Tree Size for JSON files.

Contributing

See the Contributing Guide for development setup, architecture overview, and release process.

License

MIT — free for personal and commercial use.

Made with care by Alvaro Enrique Ruano. If you find this useful, a ⭐ on GitHub is appreciated!