JSON Editor

Edit JSON in a textarea on the left and see the parsed structure as an interactive tree on the right — pretty-print, compact, sort keys, or copy/download with one click.

Last updated: May 26, 2026

Sort keys

Editor

Tree View

"name": "WebToolsPlanet"

"version": "1.0.0"

"active": true

"0": "json"

"1": "editor"

"2": "tree"

"port": 3000

"debug": false

"features": null

Client-Side Processing

Input Data Stays on Device

Instant Local Execution

Find this tool useful? Support the project to keep it free!

Buy me a coffee

What is JSON Editor?

A JSON editor combines text-based editing with a structural view: you keep the freedom of editing the raw JSON in a textarea while seeing a collapsible tree that reflects every change as you type. Errors are surfaced immediately, so you can fix typos and missing commas without leaving the editor.

This tool parses your JSON on every keystroke and updates the tree view if the parse succeeds. The Pretty and Compact buttons reformat the textarea in place. Sort keys reorders every object's properties alphabetically — useful for diffs and for producing canonical JSON. Indentation can be set to 0 (compact), 2 spaces, 4 spaces, or a tab character.

How to Use JSON Editor

Paste or type JSON into the editor on the left.

The tree view on the right updates as you type; errors are shown inline.

Click Pretty / Compact to reformat the editor in place.

Toggle Sort keys to reorder all object properties alphabetically.

Copy or Download the formatted output.

Common Use Cases

Editing a JSON config file in the browser before pasting it back into a project.
Exploring the structure of a JSON API response with the tree view.
Producing a canonical, sorted-key JSON output for diffing.
Cleaning up a minified JSON blob into a readable form.
Quickly checking that hand-written JSON is valid before pasting elsewhere.

Example Input and Output

A small JSON object with mixed types is parsed into a collapsible tree.

JSON input

{"name":"Alice","age":30,"active":true,"tags":["a","b"]}

Tree view

{4 items}
  "name": "Alice"
  "age": 30
  "active": true
  "tags": [2 items]

Privacy

All editing and formatting happens in your browser. No JSON is sent to a server.

Tree depth

The tree auto-expands the first two levels. Deeper levels are collapsed by default — click the arrow to expand any branch.

Frequently Asked Questions

Why does the tree view disappear?

It only appears when the JSON parses successfully. If you have a syntax error in the editor, fix it (the error message tells you what is wrong) and the tree will return.

Does Sort keys mutate my editor text?

It changes the formatted output. Click "Apply format" to write the sorted, formatted version back into the editor textarea.

Can I edit values in the tree directly?

Not in this version. The textarea is the source of truth — edit there and the tree updates automatically.

Does this send my JSON anywhere?

No. Parsing and formatting happen in your browser.