What it does
The JSON tree editor turns a JSON document into a collapsible tree that you can browse and edit directly. Instead of hunting for a missing comma in a long text file, you change a value in a small input box and the tool rewrites valid JSON for you.
It is handy for config files, API responses, test fixtures and translation files: anything where you need to understand the structure first and then make a few precise changes.
How to use
- Paste JSON into the input on the left, or load the sample.
- Explore the tree. Click the arrow next to an object or array to expand or collapse it, and use Expand levels to choose how deep the tree opens by default.
- Edit in place:
- Click a key to rename it. Keys keep their position in the object.
- Click a string or number to change it. Booleans have a true or false menu.
- Use the type menu on the right of each row to turn a value into another JSON type.
- Press + to add a child to an object or array, or × to delete a node.
- Press Enter or click elsewhere to apply a change, or Escape to cancel it.
- Copy the updated JSON from the input. The Indent option controls how it is formatted.
Paths
Selecting a row shows its path in JSONPath style, such as $.author.name or $.keywords[2], with a button to copy it. Keys that are not plain identifiers are quoted, for example $["first name"]. Paths are useful when you write code or queries that read the same field, for instance with jq, JavaScript optional chaining or a database JSON function.
Safe editing
Edits never produce invalid JSON. If a change cannot be applied, for example renaming a key to one that already exists or typing letters into a number, the tool shows a message above the tree and leaves your document unchanged.
If the JSON on the left contains a syntax error, the tree is replaced by the error with its line and column, so you can fix the text and carry on.
FAQ
› Are my edits saved to the JSON text?
Yes. Every change in the tree is written straight back to the JSON on the left, formatted with the indent you chose, so you can copy or download it at any time.
› How do I add or remove items?
Use the plus button on an object or array row to append a child, and the cross button on any row to delete it. New object members get a placeholder key such as key or key2 that you can rename.
› What happens when I change a type?
The tool keeps as much as it can. A number becomes its text when turned into a string, an array becomes an object keyed by index, and an object becomes an array of its values.
› Is my JSON uploaded?
No. Parsing and editing happen in your browser.