Inspect JSON structure in a Tree
Paste JSON or load a file, expand only the required branches, and check keys, values, and paths.
Open JSON Tree ViewerConclusion: Review warnings, consolidate into one choice, and make it unique
Because Tree Viewer retains duplicate Pairs and shows a warning, you can inspect the state before overwriting. In production, check the meaning and consolidate them into one, then validate with the Parser used by the destination.
JavaScript JSON.parse and similar APIs generally retain the later value. Seeing both in a Tree does not necessarily mean both are retained by the Consumer.
Object containing duplicate keys
{"role":"viewer","role":"admin","enabled":true}role appears twice in the same Object. In the Tree, check both Pairs and the duplicate warning.
Isolate the source of duplication
Check manual edits, template expansion, object merges, and concatenation of multiple configurations.
| Check points | way of seeing | judgment |
|---|---|---|
| position | Is it the same parent object? | Same names at different hierarchy levels are not duplicates. |
| Values | Both types and contents | Decide on an integration policy. |
| Where to use | Parser behavior | Check overwrites and rejection |
Procedure for investigating duplicate keys
- 1. Display the JSON as a tree and check warnings.
- 2. Open the warned object and check the pair with the same name.
- 3. Check the specification and source generator to determine which to adopt.
- 4. Correct it to be unique, then revalidate with the formatter and destination.
Read the types of Objects, Arrays, and values in a tree.
| Display | Meaning in JSON | Points to check |
|---|---|---|
| {n} | An Object with n members | Key names and parent-child relationships |
| [n] | An Array with n elements | Zero-based indexes and element order |
| string / number | String or number | Whether quotes are present and the original numeric representation |
| boolean / null | true / false or null | Distinguish from the strings "true" and "null". |
The current tool can display JSON rooted not only in objects and arrays, but also strings, numbers, booleans, and null. Empty {} and [] are also treated as valid JSON.
Use search, expand, and collapse appropriately
| Actions | Current support | When to use it |
|---|---|---|
| Search target | All, keys, values, and paths | Narrow candidates by keys or values with the same name. |
| Matching method | Partial match, exact match, and case sensitivity | Search accurately for known names |
| Move candidates | Previous/next, automatically expand ancestors and array ranges | Check matching locations in order |
| Display range | Initial depth 0–10, expand all, collapse all | Render only required branches into the DOM. |
Regular expression search is not supported. Arrays are grouped into range nodes for every 100 elements, but this is not virtual scrolling that reuses only rows visible on screen.
Do not confuse JSON Pointer with generated paths
| Representation | example | role |
|---|---|---|
| JSON Pointer | /orders/0/id | Points to one location based on RFC 6901 |
| Generate JSONPath | $.orders[0].id | Clearly show the position of the selected node |
| JSONPath query | $.orders[?(@.active)] | An expression that searches for multiple nodes matching the condition |
JSON Tree Viewer generates and copies the selected node's Pointer and JSONPath-like location expression. It is not a search engine that evaluates JSONPath expressions, so use JSONPath Tester to verify filters and wildcards.
In a Pointer, escape ~ in a key as ~0 and / as ~1. Do not manually abbreviate the displayed value; share it as is.
Separate the roles of JSON Formatter and Tree Viewer
| purpose | Tools to use | Confirmation details |
|---|---|---|
| Syntax error location, indentation, and minification | JSON Formatter（tools/converters/json-formatter.html） | Format text |
| Hierarchy, type, parent, and node path | JSON Tree Viewer | Follow the structure by collapsing it |
| Create a data specification | JSON Schema Generator（tools/generators/json-schema-generator.html） | Turn types and required candidates into a schema |
| Check before and after changes. | Text diff comparison (tools/comparators/diff-viewer.html) | Compare changes by line and character |
Formatting and tree view are not competing features. First confirm that it can be read as strict JSON, then inspect the target branch in the tree and copy only the selected node if necessary.
Handle large JSON and confidential information safely
- Parsing runs in a Web Worker, and deep hierarchies are processed with an explicit Stack. Searches also return control to the UI after a fixed number of results.
- Closed branches do not render child elements into the DOM, and arrays are grouped in units of 100 elements. However, parse results for all nodes are retained in memory.
- Show a confirmation message for files over 10 MB. This is not a fixed full-support limit; it is constrained by device memory and browser limitations.
- Input JSON, file contents, and search terms are not sent to or stored on the server. Only display settings such as theme and text size are stored in localStorage.
JSON containing authentication tokens or personal information can leak through screen sharing, the clipboard, or downloaded files. Replace values with the JSON masking tool before sharing.
What the current JSON Tree Viewer can and cannot do
| Item | Current support | Unsupported features and notes |
|---|---|---|
| Input | Paste, .json file, drag & drop | No URL fetching or automatic Clipboard reading |
| JSON | Object, Array, Primitive, empty structures, and duplicate key warnings | JSONL, JSONC, comments, and trailing commas are unsupported |
| Viewing | Initial depth, individual expansion, expand/collapse all, and array ranges in blocks of 100 items | No row virtualization or editing |
| search | All, keys, values, and paths; partial or exact match; case sensitivity | No regular expression or JSONPath expression evaluation |
| Details | Type, parent, depth, child count, JSON Pointer, and generated JSONPath | There is no breadcrumb-style editing UI. |
| output | Copy the entire JSON, keys, values, pointers, paths, and selected nodes, and save nodes | There is no separate Pretty display tab. |
Check the specification using primary sources
- RFC 8259: The JavaScript Object Notation (JSON) Data Interchange Format
- RFC 6901: JavaScript Object Notation (JSON) Pointer
- RFC 9535: JSONPath: Query Expressions for JSON
- MDN: JSON.parse()
RFC 8259 defines JSON grammar, RFC 6901 defines location references, and RFC 9535 defines JSONPath queries. Evaluate tool-specific display names separately from standard specifications.
An example where role is duplicated during settings merge
Concatenating base settings and environment settings creates duplicates.
Merge as an Object and test the intended overwrite rules.
- Check both values
- Identify the generation process
- Confirm that warnings disappear after the fix
- Record results together with paths, types, and warnings.
Some implementations reject duplicate keys as syntax errors.
Frequently asked questions
- Are duplicate keys always an error under the JSON specification?
- It may be accepted syntactically, but RFC 8259 recommends unique Object names, and behavior is not interoperable.
- Does the Tree Viewer retain only later values?
- Do not leave them. Preserve and display the Pair, and show a warning.