JSON Tree Size — JSON File Size Analyzer for VS Code

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

Ever wondered what's bloating that 50 MB JSON file?

JSON Tree Size gives you the same "what's eating my disk?" experience as TreeSize or WinDirStat — but for JSON 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 JSON and explore the full tree-size experience instantly. When you're convinced, come back and install with one click.

Why JSON 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
• 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 JSON
• Worker thread parsing — files up to 50 MB+ parsed without blocking the editor UI
• 20 languages — localized UI in Spanish, Chinese, Japanese, Korean, French, German, and 14 more

Getting Started

Install

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

Option 1 — Right-click a JSON file

Right-click any .json file in the Explorer sidebar and select "Analyze with JSON Tree Size".

Option 2 — Command Palette

With a .json file open, press Ctrl+Shift+P (Cmd+Shift+P on macOS) and type "JSON 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

• API payload optimization — identify which fields dominate your REST/GraphQL responses and trim them to cut bandwidth
• Config file audit — find why your package.json, tsconfig.json, or app config ballooned to megabytes
• Data pipeline debugging — spot unexpected array growth or deeply nested objects in ETL output
• Bundle analysis — visualize source maps and build manifests to understand what's adding weight
• Log file triage — quickly locate the verbose keys in structured JSON logs

Frequently Asked Questions

Is my data safe? Yes — JSON 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 large a file can it handle? Worker thread parsing keeps the editor responsive for files over 50 MB. The practical limit is your available memory.

Does it work with JSONC / JSON5 / JSON with comments? It parses standard JSON (RFC 8259). Files with trailing commas or comments will show a parse error.

Can I use it with XML too? Yes — check out the companion extension XML Tree Size for XML and SOAP payloads.

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!