JSON Editor

About the JSON Editor

What is a JSON editor?

Editing JSON as plain text is where most mistakes come from. Delete one brace, leave one trailing comma, forget one pair of quotes, and the whole document stops parsing. A JSON editor gives you the structure instead of the punctuation, so you work on keys and values directly, and the syntax is generated for you, so it is always correct.

This editor keeps a tree and the raw text side by side, permanently in sync. Change a value in the tree and the text updates. Paste new text and the tree rebuilds. You can work whichever way suits the moment, which is the part that most single-view editors get wrong.

Everything runs in your browser. Your JSON is never uploaded, which matters, because the documents people most need to edit tend to be API responses, config files, and exports with real data in them.

What you can do here

• Edit any value in place: Click a value to change it, or a key to rename it. Renaming keeps the key in its original position rather than moving it to the end.
• Change a value's type: The dropdown on each row converts between string, number, boolean, null, object, and array, converting the contents sensibly where it can.
• Restructure: Add children, duplicate a node with its whole subtree, move entries up and down, and delete anything.
• Undo and redo: Every edit is tracked, with Ctrl and Z to step back and Ctrl and Y to step forward.
• Search: Filter the tree by key or value, with matches highlighted and counted, and non-matching branches hidden.
• Repair broken JSON: Fix single quotes, trailing commas, unquoted keys, comments, NaN, and unclosed brackets in one click.
• Format, compact, and sort: Switch between indented and single-line output, or sort every object's keys alphabetically.
• See what you have: A live count of nodes, keys, nesting depth, and byte size.

How to Use This Tool

1. Start from the template, or load your own. The editor opens with a small starter document covering every JSON type, so you can build from it straight away. Otherwise paste into the text pane, use Open file, or press Sample for a fuller example.
2. Edit in the tree. Click any key or value to change it. Hover a row for the add, duplicate, move, type, and delete controls.
3. Fix anything broken. If the badge turns red it names the problem and the line. Repair handles the usual culprits automatically.
4. Take the result. Copy it, download it as a .json file, or send it to another JSON tool with the buttons underneath.

Common Use Cases

• Tweaking an API response: Change a couple of fields to build a test fixture without hand-editing brackets.
• Editing config files: package.json, tsconfig.json, and similar files are far safer to change structurally.
• Cleaning up pasted data: Repair copy-pasted JavaScript object literals into real JSON.
• Exploring an unfamiliar payload: Collapse everything, then open only the branches you care about.
• Building sample data by hand: Start from an empty object and add fields without typing a single brace.

Need something more specific? Use the JSON Formatter for beautifying, the JSON Validator for detailed error checking, the JSON Viewer for read-only browsing, or the JSON Compare tool for diffing two documents. There are more in our free developer tools.

Frequently Asked Questions

How is this different from the JSON Viewer or Formatter?

The Viewer shows a tree you can browse but not change, and the Formatter reindents text. This is an editor. You change the data itself through the tree, and the JSON is rebuilt for you. If you only want to read or beautify a document, those tools are lighter.

Does renaming a key move it to the end?

No. A naive rename deletes the old key and adds a new one, which pushes it to the bottom of the object. This editor rebuilds the object in place so the renamed key keeps its original position, and it refuses a rename that would collide with a key already there.

What exactly does Repair fix?

Single-quoted strings, unquoted keys, trailing commas, JavaScript style comments, NaN, undefined and Infinity, Python style True and None spellings, and brackets left unclosed at the end. It works through the document token by token, so commas, braces, and slashes that appear inside strings are left exactly as they are.

Is there a size limit?

The text pane will take whatever your browser can hold, but the tree only draws the first 3,000 nodes so that very large documents stay responsive. If you hit that limit the editor tells you, and the text view still shows the whole document.

Can I undo a mistake?

Yes. Every structural edit is recorded, and the Undo and Redo buttons step through the last hundred changes. Ctrl and Z works too, except while your cursor is inside the text pane, where the editor's own undo takes over.

Does it preserve the order of my keys?

Yes. Objects keep their key order exactly as loaded, and moving a key up or down changes that order deliberately. Nothing is reordered unless you press Sort keys, which sorts every object alphabetically. Array order is never touched by sorting.

Is my data uploaded anywhere?

No. Parsing, editing, and validation all happen in your browser with JavaScript. Nothing is sent to a server and the tool keeps working offline once the page has loaded.