Skip to content

JSON Viewer

This JSON viewer shows any JSON file or API response as a searchable tree. Click a node to find it in the text and copy its path.

Input · JSON
object {14}
"id": 6402
"name": "tiny-http"
"full_name": "sam-ito/tiny-http"
"private": false
"owner": {3}
"login": "sam-ito"
"type": "User"
"site_admin": false
"description": "A small HTTP server for embedded devices"
"topics": [3]
0: "http"
1: "embedded"
2: "rust"
"stargazers_count": 1287
"forks_count": 94
"open_issues": 12
"license": {2}
"key": "mit"
"name": "MIT License"
"default_branch": "main"
"latest_release": {3}
"tag": "v0.4.2"
"published_at": "2026-10-28T12:00:00Z"
"assets": [2]
0: {3}
"name": "tiny-http-linux-x64.tar.gz"
"size": 1843200
"downloads": 512
1: {3}
"name": "tiny-http-macos-arm64.tar.gz"
"size": 1720320
"downloads": 388
"homepage": null
Valid JSON14 top-level keys · depth 5 · 28 keysRuns in your browser

Load from a URL

Your browser fetches it directly, so the server must allow cross-origin requests (CORS).

How to use the JSON viewer

  1. Paste JSON, drop a file on the tool, or press Open file or From URL.
  2. The Tree opens fully expanded for small documents and two levels deep for large ones. Collapse, 2 levels and Expand all reset it.
  3. Search keys and values, in any letter case. Matches open their branches; the arrows next to the box, or Enter and Shift + Enter, step through them.
  4. Click a node to select its text in the editor and show its path under the tree.

Arrow keys move through the tree: up and down between rows, right to open a branch, left to close it.

Copy a path three ways

{
  "metadata": {
    "name": "web-7d9f",
    "labels": { "app.kubernetes.io/name": "web", "tier": "frontend" }
  },
  "spec": {
    "containers": [{ "name": "web", "image": "nginx:1.27" }]
  }
}

Clicking app.kubernetes.io/name in this pod spec offers:

JSONPath  $.metadata.labels['app.kubernetes.io/name']
JS        data.metadata.labels["app.kubernetes.io/name"]
Pointer   /metadata/labels/app.kubernetes.io~1name

The key has dots and a slash, so JSONPath and the JavaScript accessor switch to brackets, and the JSON Pointer escapes the slash as ~1 (RFC 6901). Use the JSONPath in the JSONPath tester, the accessor in code, and the pointer in a JSON Patch or a $ref. Copy value copies a string without its quotes, or an object exactly as written.

In the editor, the status bar shows the JSONPath of the value under the cursor.

Hide fields

Fields lists each key once, with the keys of all array items merged, so unchecking image in the pod spec above hides it in every container. The tree, table and graph follow the same choice, and the JSON itself stays as it is. Save keeps the choice as a preset in your browser for the next file.

Large files

Only the rows on screen are drawn, so scrolling stays smooth at any length. Files up to 50 MB open with Open file or drag and drop. Search stops counting at 2,000 matches; if you see 2000+, use a more specific term.

Tree, table or graph

Arrays of records read better in the Table tab, and the Graph tab shows the overall shape. JSON to table and the JSON visualizer open on those views, with the JSON you pasted last (up to 512 KB).

A syntax error is underlined in the editor, with its line and column in the status bar. The JSON validator explains it.

Questions

What do the numbers in braces and brackets mean?

{3} is an object with three keys and [12] an array with twelve items, so you see how big a branch is before you open it.

Does the viewer change my JSON?

No. Expanding, searching, hiding fields and selecting only read it. The text changes only when you press Format, Minify or Sort keys.

Can I edit the JSON while viewing it?

Yes, in the editor. The tree rebuilds a moment after you stop typing and keeps the branches you had open.

Can I open JSON Lines or NDJSON files?

Not as they are: each line is a separate JSON value and the viewer expects one. Wrap the lines in [ ], with a comma after each line but the last, to view them as an array.

Related tools

Esc