Skip to content
PocketDesk
Your files are processed on your device, never uploaded

JSON tree viewer

  • On device
Input
Ln 1, Col 11 line0 BUTF-8

Paste, drop or open a file in Input to see the result here.

Waiting for input
  • ⌘Enter Format
  • ⌘⇧M Minify
  • ⌘⇧C Copy result
  • ⌘F Find in result
  • Esc Exit full screen
  • Use Ctrl instead of ⌘ on Windows and Linux

How to browse JSON as a tree

  1. Paste your JSON into Input, drop a .json file on the page, or press Open file.
  2. The result opens in Tree view. Select the arrow next to an object or array to open or close it.
  3. Click a row to copy its path, or use Expand all, Collapse all and the search box to find what you need.

Switch to Text to see the same data as formatted JSON, with the indent you choose.

Why a tree helps

A long API response is hard to read as text. Nested objects hide behind many lines of braces, and it is easy to lose your place. A tree shows one level at a time, so you can open only the branch you care about. Each row shows the key, the value or a short preview, and a badge for its type.

Copying a JSONPath

Every row knows its path from the root. Click it and you get an expression like $.store.book[0].title. Paste that into code, a test, or the JSONPath query tool to pull the same value out of other documents. Keys with spaces or symbols use the bracket form, for example $['first name'].

Tips

  • Not sure the JSON is valid? The status bar tells you, with the line and column of the first error. The JSON validator goes into more detail.
  • Need a stable view? Turn on Sort keys in the Text view to order keys A to Z.
  • Want to turn a sample into types? Try JSON to TypeScript.
  • Press Ctrl+F (or Cmd+F on a Mac) while the tool is focused to search the tree.

Privacy

Responses often include tokens and personal data. The viewer runs in your browser, sends nothing to a server, and keeps no copy of your text.

Questions

How do I copy the path to a value?

Click any row in the tree. Its JSONPath, such as $.items[2].name, is copied to your clipboard and shown in the toolbar.

Can I search inside the tree?

Yes. Type in the search box to highlight keys and values that match. The tree opens up to every match so you can see where it sits.

What do the type badges mean?

They show the kind of each value: obj with its key count, arr with its length, str, num, bool and null. They help you spot a number stored as a string.

Does it work with very large JSON?

Yes. Branches are drawn only when you open them, and long arrays show the first 100 items with a button for more, so big files stay fast.

Is my JSON uploaded?

No. The tree is built in your browser and nothing leaves your device.

More developer tools