What is a JSON tree editor?

JSON stores data as objects, which hold named values, and arrays, which hold ordered lists. Because they can be nested, a large document is hard to change in a plain text editor: one missing comma or brace makes the whole file invalid. A tree editor shows the same data as a set of nodes that you can open and close. You change a value, rename a key, or add and remove a node directly, and the tool takes care of the commas, quotes, and brackets.

Tool description

This tool lets you edit JSON as a tree. Paste your JSON and it appears as a tree of objects, arrays, and values. Use the pencil next to a node to change its key or value, the plus next to an object or array to add a child, and the bin to remove a node. Every change is written back to the JSON text right away, so you can copy the result when you are done. You can still type in the text editor, and the tree follows. Everything happens in your browser, and your data is not sent anywhere.

Examples

Start with this JSON:

{
  "name": "example-app",
  "port": 8080,
  "tags": ["json", "tree"]
}
JSON

Change port to 3000, add the string editor to tags, and add a new key private set to true. The text becomes:

{
  "name": "example-app",
  "port": 3000,
  "tags": ["json", "tree", "editor"],
  "private": true
}
JSON

Features

  • Edit keys, strings, numbers, booleans, and null values in place
  • Add new keys to objects and new items to arrays, and remove any node except the root
  • Change the type of a value, for example from a string to a number
  • Keeps the key order, and warns when a key is already used in the same object
  • Expand or collapse the whole tree, and see how many nodes it has

How it works

The tool parses your text as JSON and shows the result as a tree. When you make a change, it builds a new copy of the data with that change and writes it back as text with 2 spaces of indentation. Renaming a key keeps its place among its siblings. Keys that look like whole numbers, such as "1" or "2", are always listed first in ascending order, as in every JavaScript JSON parser.

A value has one of six types: string, number, boolean, null, object, or array. New objects and arrays start empty, and you fill them with the plus button. An object or array that already has children keeps its type, so you cannot lose its contents by accident, but you can still rename its key.

Tips

  • Press Enter to save a change and Escape to cancel it. In a string, press Shift and Enter to add a line break
  • If the text on the left is not valid JSON, the tree stays empty and the error is shown until you fix it
  • The tree has no undo, so keep a copy of your original JSON if you are unsure about a change
  • Numbers larger than 9007199254740991 lose precision, because JSON numbers are read as JavaScript numbers
  • To only look at JSON without changing it, use the JSON Tree Viewer