JSON Viewer

A JSON Viewer parses a valid JSON document and presents its structure as an interactive tree instead of a flat block of text. Objects show keyed branches, arrays show indexed branches, and every node displays its key, value, type badge, and full JSON path. You can expand or collapse any level and click a node to inspect its details.

Paste your JSON into the input area, open a local .json file, or click Load sample. ToolsSonic parses the document in your browser and renders a collapsible tree immediately. Click any node to see its JSON path, type, value preview, and depth in the Inspector panel.

Yes. Click the ▸ arrow next to any object or array branch to expand it, or ▾ to collapse it. The Expand all button opens every branch simultaneously, and Collapse all closes them all to show only the root. Individual branch state is stored locally in the page so your view does not reset.

Type any term into the search box to highlight matching nodes in the tree. Use the scope selector to search All content, Keys only, Values only, or Paths only. The match count updates live as you type. Searching $.user highlights every node whose path contains that string, while searching for a value like "ready" highlights only nodes whose value matches.

A JSON path describes the location of a value in the document. ToolsSonic shows paths such as $.user.name for object properties and $.items[0] for array elements. Paths use dollar-sign root notation, dot notation for object keys, and bracket notation for array indexes — the same conventions used by JSONPath query engines.

Every node shows a coloured badge for its JSON type: object (blue), array (light blue), string (green), number (amber), boolean (purple), or null (grey). The colour coding lets you scan a large tree and spot type patterns — for example, seeing whether an API response field contains a string or a number.

Yes. Paste any API response body into the viewer and navigate the tree to find nested metadata, pagination fields, array contents, and custom payloads. The Inspector shows the full JSON path, type, value preview, and depth for the selected node, making it fast to locate a field several levels deep.

The viewer stops before rendering a misleading tree and shows an Invalid JSON error state with the browser parser message and a direct link to the JSON Validator. Fix the syntax issue in the Validator first, then paste the corrected document back into the Viewer.

Yes. Select Paths in the scope dropdown and type a path segment such as .tags or [0]. Every node whose path contains that string is highlighted in the tree and counted in the search results. This is useful for locating all occurrences of a repeated key across multiple array items or nested objects.

Yes. Copy JSON puts a formatted two-space-indented version of the parsed document on your clipboard. Download saves a local json-view.json file. The viewer does not modify or transform values — the copy and download output reflects the parsed structure exactly.

No. The viewer checks whether the text is parseable JSON so it can build the tree. It does not validate required properties, data types, ranges, patterns, or additional-properties constraints. Use the JSON Schema Validator for those checks.

Yes. Click Open file and choose a local .json or .txt file. The browser reads it with FileReader entirely in memory. The file content is not sent to any server, no upload endpoint is contacted, and nothing is written to localStorage.

Yes. All parsing and rendering uses the browser's built-in JSON.parse. There are no network requests, no server-side rendering, no analytics on your input, and no localStorage writes. The document never leaves your device.

A JSON Viewer is optimised for exploring structure: you navigate branches, read paths, search keys and values, and inspect individual nodes. A JSON Formatter is optimised for producing readable or compact output text: you choose indentation, sort keys, and download clean JSON. Use the Viewer to understand a document's structure, then use the Formatter when you need export-ready text.

Paste or load the file and explore it as a collapsible tree. Collapsing big branches keeps the page responsive and lets you focus on the part of the structure you care about.

Yes. Every object and array node in the tree can be expanded or collapsed, which is the fastest way to understand deeply nested API responses.

Yes. Load the file and it is read locally in your browser — nothing is uploaded to a server.

The viewer is for exploring structure — it renders your document as an interactive tree. The formatter is for producing formatted text output you can copy back into code or config files. They share the same private, in-browser engine approach.

A tree shows nesting visually, so you can see at a glance which keys exist at each level and how arrays are structured, without counting braces in a wall of text.

Everything runs locally in your browser with no upload, no account, and no logging. You can confirm in your browser DevTools Network tab that no request carries your data.

Use the JSON Viewer to inspect a document — pretty view, search, and structure at a glance. Use the JSON Tree Viewer when you are exploring deep nesting: it is a dedicated interactive explorer with expand-and-collapse for every branch. Both run entirely in your browser.