JSON Viewer & Editor

What the JSON Viewer shows

The JSON Viewer draws a JSON document as a tree that you open one level at a time. Every row starts with a key, or with an index such as [2] for an item of an array. A badge gives the type: {} with the number of keys for an object, [] with the number of items for an array, and string, number, boolean or null before a plain value. Numbers keep the characters your text uses, so a price of 19.90 is not shown as 19.9. A string longer than 200 characters is cut short in its row; select it and the full text appears under the tree.

How to view JSON as a tree

The tree also works from the keyboard. Arrow keys move up and down, the right arrow opens a node or enters it, and the left arrow closes it or goes back to its parent. Home and End jump to the first and last rows, * opens every node at the current level, and Enter selects the node's text in the code view.

Examples

{"order":{"id":"A-17","items":[{"sku":"X1","price":19.90},{"sku":"Y2","price":5}]}}

{} root · 1 key
└─ order {} · 2 keys
   ├─ id "A-17"
   └─ items [] · 2 items
      ├─ [0] {} · 2 keys
      │  ├─ sku "X1"
      │  └─ price 19.90
      └─ [1] {} · 2 keys
         ├─ sku "Y2"
         └─ price 5

{"user name":{"e-mail":"ada@example.com","flags":{"a/b":true,"x~y":null}}}

$["user name"]                 /user name
$["user name"]["e-mail"]       /user name/e-mail
$["user name"].flags           /user name/flags
$["user name"].flags["a/b"]    /user name/flags/a~1b
$["user name"].flags["x~y"]    /user name/flags/x~0y

{
  "name": "Ada",
  "langs": ["en", "fr"]
  "active": true
}

Line 4, column 3: Expected a comma before this member. Put a comma between the two. (JSON_MISSING_COMMA)

In the last example the tree keeps showing the document as it was before the comma went missing, with a Stale badge, until the comma is back.

JSONPath or JSON Pointer

Both formats name the place of one value, but they come from different standards and tools expect one or the other.

• JSONPath (RFC 9535 (opens in a new tab)) starts with $ for the whole document. A key made of ASCII letters, digits and underscores, not starting with a digit, follows a dot; any other key goes in brackets as a quoted JSON string, and an array index goes in brackets as a number: $.order.items[1].price, $["user name"].
• JSON Pointer (RFC 6901 (opens in a new tab)) puts a slash before each step: /order/items/1/price. Inside a step, ~ is written ~0 and / is written ~1, so the key a/b becomes a~1b. The whole document is the empty pointer, and a key that is an empty string is a lone /.

Where each one fits:

• jq filters use the JSONPath form without its $. Remove the $ when a dot follows it, and replace it with a dot when a bracket follows it: $.order.items[1].price becomes .order.items[1].price, and $["user name"] becomes .["user name"].
• JSON Schema validators report where a document breaks a schema as a JSON Pointer, such as Ajv's instancePath.
• JSON Patch (RFC 6902 (opens in a new tab)) takes a JSON Pointer in the path of each operation: {"op": "replace", "path": "/order/items/1/price", "value": 6}.

The Path format option decides which form the viewer shows and copies. When an object repeats a key, neither format can tell its members apart; the viewer then warns that the path matches more than one value.

Finding a key or value

Search looks through keys and values at once, or only one of them with Search in. It ignores upper and lower case and reads escapes the way a program would, so été finds a string written as "\u00e9t\u00e9". Numbers, true, false and null are matched against their text, which means 19.9 finds 19.90. Objects and arrays never match as a whole; their keys and values do.

Every match is highlighted, and the nodes above it open so that it can be seen. The counter beside the field says which match is selected and how many there are; Enter goes to the next one and Shift+Enter to the previous one. The list holds the first 1,000 matches, and the counter still gives the total. In a long API response, searching for a field name, such as status with Search in set to keys, is usually quicker than opening levels by hand.

Editing with a live tree

You edit in the code view, and the tree follows: after you stop typing for a moment, the code is read again and the tree is rebuilt. Nodes you opened stay open and the selected node stays selected, as long as their paths still exist. Clicking a node selects its text in the code, and moving the cursor in the code selects the matching node in the tree.

While the code is not valid JSON, the tree shows the last version that was, marked Stale, and the problems are listed under the tool and underlined in the code. The badge disappears once the code is valid again. For input of 1 MB or more, the tree waits for Show tree or Ctrl+Enter instead of following every pause in typing.

Working with large JSON files

The viewer accepts up to 10 MB. Parsing runs in the background, so the page stays responsive while a big file opens, and the tree draws only the rows on screen. A node with many children shows the first 200 of them, followed by a Show next 200 row.

From 5 MB or 100,000 values, the viewer switches to large document mode and says so under Problems. The tree opens at its top level, Expand to depth is turned off, and searching waits for the Search button, since each search reads the whole document again. To reach a value deep inside a large document, search for its key and step through the matches.

Options

Common errors and fixes

Any other syntax error also stops the tree from updating. The JSON Formatter explains every syntax error with examples of the fix, and the JSON Minifier turns a document you have checked here into a single line.