How to explore complex json configuration files in a tree view
- Step 1Get the config as a JSON file — App config,
tsconfig.json,package.json, a CloudFormation template, or a Kubernetes manifest exported as JSON. If your manifest is YAML, convert it first with yaml-to-json — the viewer reads JSON, not YAML. - Step 2Drop the file onto the viewer — Accepted extensions are
.json,.ndjson,.jsonl, and.txt. For a single config use a.jsonfile with one JSON document. Free tier covers files up to 2 MB, which fits essentially every config file. - Step 3Decide on Max depth — Leave Max depth at 20 (the default) for normal configs. For an enormous template where you only need the top sections, lower it to 2 or 3 — nested blocks still appear as collapsed
Object(n)nodes you can identify by child count. - Step 4Click View Tree and scan the top level — Read the root sections first. For CloudFormation:
Parameters,Resources,Outputs. For Kubernetes:metadata,spec,status. Forpackage.json:dependencies,scripts,devDependencies. The toolbar shows total nodes and max depth as a size check. - Step 5Search for the setting you're chasing — Type
replicas, an image name, a port, or a flag key. Matching branches expand; the rest collapse. This is faster than text search because it shows you the structural location, not just a line number. - Step 6Copy the path for patches or review — Hover the value and click Copy to capture
$.spec.template.spec.containers[0].image. Use it in a kustomize/patch note, a json-path-extractor query, or a change-review comment. Download exports the tree shape as<name>.tree.json.
Common config files and where the deep nesting lives
Typical JSON config shapes and the branch you most often need to drill into. Paths shown in the viewer's $ / .key / [n] notation.
| Config type | Top-level keys | The deep branch you usually want | Sibling tool if not JSON |
|---|---|---|---|
| Kubernetes manifest | apiVersion, kind, metadata, spec | $.spec.template.spec.containers[0].env | yaml-to-json if YAML |
| CloudFormation template | Parameters, Resources, Outputs | $.Resources.<Name>.Properties | — |
tsconfig.json | compilerOptions, include, exclude | $.compilerOptions.paths | — |
package.json | dependencies, scripts, devDependencies | $.scripts / $.dependencies | — |
App config (.json) | varies (server, db, features) | $.features / $.db.connection | — |
.eslintrc.json | rules, extends, overrides | $.overrides[0].rules | — |
Reading a setting's type in the tree
What the node colour/type tells you about a config value — useful when a setting is being read as the wrong type.
| Config value | Node type | Renders as | Gotcha it reveals |
|---|---|---|---|
"replicas": 3 | number | 3 | Distinguishes a real number from "3" (string) a parser may reject |
"enabled": true | boolean | true | Catches "true" (string) accidentally set instead of boolean |
"PORT": "8080" | string | "8080" | Env values are strings in Kubernetes — number-looking but quoted |
"args": [ ... ] | array | Array(n) | Shows arg/command list length without expanding |
"limits": { ... } | object | Object(n) | Resource block child count at a glance |
"nodeSelector": null | null | null | Reveals an explicitly-null setting vs an omitted one |
Cookbook
Config-exploration walkthroughs from real DevOps files. Secrets and hostnames anonymised; structures mirror common manifests and templates.
Find the container image and copy its path
ExampleYou need the exact path to a Deployment's image to write a patch. The image lives several levels into the pod spec — hover and copy instead of counting braces.
Manifest branch in the tree: $ ......................... Object(4) $.spec .................... Object(3) $.spec.template ........... Object(2) $.spec.template.spec ...... Object(2) $.spec.template.spec.containers ... Array(1) $.spec.template.spec.containers[0].image ... "app:1.4.2" Copy → $.spec.template.spec.containers[0].image
Locate where replicas is set
ExampleAcross a multi-document-merged config you're not sure which block sets the replica count. Search jumps to it and shows the path.
Search: replicas → auto-expands the matching branch: $.spec.replicas ... 3 Copy $.spec.replicas for your scaling patch. If multiple blocks define it, each match expands so you can see all the places it appears.
Audit tsconfig path aliases
ExampleModule resolution is failing and you suspect compilerOptions.paths. View the tree to see exactly which aliases are mapped.
$.compilerOptions ......... Object(9)
$.compilerOptions.baseUrl . "."
$.compilerOptions.paths ... Object(3)
"@app/*" ..... Array(1) → ["src/*"]
"@lib/*" ..... Array(1) → ["libs/shared/*"]
"@test/*" .... Array(1) → ["tests/*"]
Confirm the alias and target without scrolling raw JSON.Inspect only the outer structure of a giant template
ExampleA CloudFormation template defines 40+ resources. You only need to confirm the section layout, not expand every resource. Cap the depth.
Set Max depth = 2 before View Tree. $ ............ Object(3) $.Parameters Object(6) $.Resources Object(42) ← 42 resources, children not built $.Outputs Object(5) You see the template's shape and counts without rendering every resource block.
Confirm a feature flag is boolean, not a string
ExampleA feature won't toggle. The tree shows whether the flag is a real boolean or a quoted string the loader treats as always-truthy.
$.features ............ Object(3) $.features.newCheckout "true" ← string, not boolean! $.features.betaSearch . true $.features.darkMode ... false newCheckout is the string "true" (green) not boolean true (amber) — that's why your `if (flag === true)` check fails.
Errors and edge cases
Real errors and silent failures sourced from each platform's own documentation. Match the wording to the row, fix what the row says to fix.
The config is YAML, not JSON
Wrong formatKubernetes manifests and many CI configs are YAML. This viewer reads JSON only — drop a YAML file and JSON.parse fails. Convert first with yaml-to-json, then view the JSON output as a tree.
Comments in the config file (`.jsonc` / commented tsconfig)
Parse errorStrict JSON forbids comments, but VS Code-style tsconfig.json and .jsonc files allow // ... and /* ... */. Those make JSON.parse throw. Strip comments first — run the file through json-format-fixer or remove them by hand before viewing.
Trailing comma in a hand-edited config
Parse error{ "a": 1, } is invalid JSON. Hand-edited configs often pick up trailing commas. Remove them, or fix the file with json-format-fixer before loading it into the viewer.
Multi-document YAML-converted file (`---` separators)
Single document onlyA Kubernetes file with several ----separated documents converts to multiple JSON objects, not one. The viewer parses a single JSON value, so wrap the converted objects in a top-level array ([ {...}, {...} ]) before viewing, or view each document separately.
Template deeper than Max depth
PreservedIf a resource block nests deeper than the Max depth setting, the block at the cap shows as Object(n) / Array(n) with its child count but can't be expanded. Raise Max depth (up to 20) and re-run to drill into it. Nothing is dropped, only child rendering is capped.
Environment variables interpolated as `${VAR}`
Treated as textThe viewer doesn't resolve ${ENV_VAR} or !Ref/!Sub CloudFormation intrinsics — they're shown verbatim as the string they are in the file. The tree reflects the raw config, not the rendered/deployed value.
Secrets embedded in the config
Stays localDatabase passwords and API keys in a config never leave your browser — parsing is client-side. The viewer is a read-only explorer; it does not redact secrets. To anonymise sensitive values for sharing, use json-anonymizer first.
File over the 2 MB free limit
Upgrade requiredFree uploads cap at 2 MB. Most configs are well under that, but a generated CloudFormation template with many resources can exceed it. Pro raises the limit to 100 MB; or cap Max depth to view the outer structure of a large file within limits.
Duplicate keys in an object block
Last winsIf a config object repeats a key, JSON.parse keeps the last one and the tree shows a single node. This mirrors how most JSON config loaders behave, but it can hide an accidental override — inspect the raw text if you suspect a duplicate.
You wanted to edit or re-indent the config
Read-onlyThe viewer explores structure; it doesn't edit. To re-indent or pretty-print the config use json-prettifier; to compare two config versions field by field use json-diff.
Frequently asked questions
Can I view a Kubernetes YAML manifest here?
Not directly — this viewer reads JSON. Convert the manifest with yaml-to-json first, then drop the JSON output here to explore spec.template.spec.containers and the rest as a tree.
Why does my tsconfig.json fail to load?
VS Code-style tsconfig files often contain // comments, which strict JSON forbids — JSON.parse throws. Strip the comments (or run the file through json-format-fixer) and try again.
How do I find which block sets a value?
Type the key into the search box — for example replicas or an image name. The viewer auto-expands every branch containing a match and hides the rest, so you see the structural location, then Copy the path.
Does it resolve environment variables or CloudFormation intrinsics?
No. ${VAR}, !Ref, and !Sub are shown as the literal text in the file. The tree reflects the raw config, not the deployed/rendered values.
Are secrets in my config uploaded?
No. Parsing runs in your browser with native JSON.parse; passwords and keys never reach a server. The viewer won't redact them, though — use json-anonymizer if you need to share a sanitised copy.
What does Max depth do for a big template?
It caps how many levels build expandable children (1–20, default 20). Set it to 2 or 3 to see just the top sections of a huge CloudFormation template — deeper blocks still appear as collapsed Object(n) nodes with their counts.
Can I copy the exact path to a setting?
Yes. Hover any node and click Copy to get its path in $ / .key / [n] form, e.g. $.compilerOptions.paths. Paste it into a patch script or a json-path-extractor query.
How do I compare two versions of a config?
Use json-diff to see field-level additions, removals, and changes between two config files. The tree viewer is for exploring a single file's structure.
My manifest has multiple documents separated by ---. Can I view them?
After converting to JSON you'll have multiple objects. Wrap them in a top-level array, or view each document separately — the viewer parses one JSON value at a time.
Does it validate the config against a schema?
No, it only visualises structure. For validation use json-validator; to derive a schema from a sample config use json-schema-generator.
Can I re-indent the file from here?
No — the viewer is read-only for exploration. Use json-prettifier to pretty-print or json-minifier to compact the config.
Is it free?
It runs in your browser and works on the free tier up to 2 MB per file — large enough for virtually any config. Pro removes the size limit (100 MB) and adds bulk and saved-history.
Privacy first
Conversion runs locally in your browser. No file is uploaded — only metadata counters are saved for signed-in dashboard stats.