JSON Editor

Editing JSON by hand, without losing your place

This editor is for the jobs where you change JSON yourself: adjusting a config file, trimming an API response down to a test fixture, or fixing one value deep inside a large payload. It runs CodeMirror 5 in JSON mode, so you get syntax colors, line numbers, and structure-aware folding, while every other action (validating, formatting, saving) happens in your browser.

What the editor gives you

• Folding: an arrow in the gutter next to every line that opens an object or array. Click it to collapse the block to one line.
• Bracket help: typing {, [, or " inserts the closing character, and the matching bracket is highlighted when the cursor sits next to one.
• Format and Minify: rewrite the whole document with 2-space indentation, or strip it to a single line.
• Validate JSON: parses the text with the browser's JSON.parse and shows either the error or a pretty-printed copy in the side panel. It also runs once when the page loads.
• Fullscreen and themes: Fullscreen (or F11) gives the editor the whole window, Esc leaves it. Monokai, Dracula, and a light theme are available, and your choice is remembered.

Keyboard shortcuts

On a Mac, use Cmd in place of Ctrl. Jumping to the start or end is Cmd + Up / Down.

Worked example: finding your way through an API response

API responses usually arrive minified, which makes them impossible to edit. Paste one in:

{"status":"ok","page":1,"per_page":2,"items":[{"id":101,"email":"[email protected]","roles":["admin","billing"]},{"id":102,"email":"[email protected]","roles":["viewer"]}],"meta":{"total":57,"next":"/v1/users?page=2"}}

Click Format and it becomes:

{
  "status": "ok",
  "page": 1,
  "per_page": 2,
  "items": [
    {
      "id": 101,
      "email": "[email protected]",
      "roles": [
        "admin",
        "billing"
      ]
    },
    {
      "id": 102,
      "email": "[email protected]",
      "roles": [
        "viewer"
      ]
    }
  ],
  "meta": {
    "total": 57,
    "next": "/v1/users?page=2"
  }
}

Now fold "items" and "meta" using their gutter arrows. The document shrinks to its top-level shape, which is often all you need to see where a field lives:

{
  "status": "ok",
  "page": 1,
  "per_page": 2,
  "items": [↔],
  "meta": {↔}
}

Expand only the block you want to change. For a document with hundreds of array entries, fold the entries you have checked as you go. Folds are cleared whenever the whole text is replaced (Format, Minify, or an import), so fold after formatting, not before.

Mistakes that happen while editing

Deleting the last property leaves a trailing comma

Remove "next" from "meta" with Ctrl + D and the line above still ends in a comma: "total": 57, followed by }. That is invalid JSON. Delete the comma on the new last line.

Adding a property without a comma

The reverse: you add a line after the last property but forget the comma on the line before it. Validate reports something like Expected ',' or '}' after property value, pointing at the start of your new line.

Doubled quotes from auto-closing

Typing " inserts a pair. If you then paste a value that already has quotes, you get ""[email protected]"". Paste first, or delete the extra pair.

Format rounds very large numbers

Format and Minify rebuild the text from the parsed data, and JavaScript numbers are only exact up to 9,007,199,254,740,991. An ID like 12345678901234567890 comes back as 12345678901234567000. If a file holds 64-bit IDs as numbers, edit it without formatting, or undo right away with Ctrl + Z.

Saving, importing, and exporting

The editor saves to your browser's local storage every 2 minutes and on Ctrl + S, and reloads that copy the next time you open it in the same browser. It holds one document, separate from the other editors on this site. Download saves the current text as data.json. Import File opens a .json file from your device. Import URL fetches from your browser, so it works for endpoints that allow cross-origin requests and fails for most others.

What this editor does not do

• No interactive tree view. The side panel is a read-only, pretty-printed copy.
• No JSON Schema validation and no live error marking as you type. Validation runs when you click Validate JSON.
• No built-in search and replace or autocomplete. Ctrl + F opens your browser's own find bar.
• No comments, trailing commas, or other JSON5 syntax when validating or formatting.
• The editor grows with its content instead of scrolling inside a box, so a long file makes a long page. Use Fullscreen to work in a fixed window.

When to use a different tool

• To check syntax with sorted keys or a 4-space indent, use the JSON Validator.
• To pretty-print JSON without editing it, use the JSON Formatter.
• To fix JSON with comments, single quotes, or trailing commas automatically, use JSON Repair.
• To open an array of records in a spreadsheet, use JSON to CSV.

Frequently asked questions

How do I collapse a section of JSON?

Click the small arrow in the gutter next to the line number of any line that opens an object or array. The block collapses to a single line and the arrow expands it again. Folding needs multi-line JSON, so click Format first if your JSON is minified onto one line. Format, Minify, and imports replace the text and reset all folds.

Why does Format say "Cannot format invalid JSON"?

Format and Minify parse the text first and refuse to run if it is not valid JSON. Click Validate JSON to see the parser message, which includes the character position and, in recent Chrome and Edge versions, the line and column. The usual cause after hand editing is a missing or extra comma.

Can I undo Format or Minify?

Yes. Press Ctrl+Z (Cmd+Z on Mac) right after formatting to get your previous text back, including your own indentation. Ctrl+Y or Shift+Cmd+Z redoes it.

Is my JSON saved if I close the tab?

It is saved to your browser's local storage every 2 minutes and whenever you press Ctrl+S, then restored when you reopen the editor in the same browser. Only one document is kept, nothing is uploaded, and Clear or clearing site data deletes it. Use Download to keep a real file.

Does the editor have a tree view or JSON Schema validation?

No. The panel next to the editor shows whether the JSON is valid and a pretty-printed copy of the parsed data, not an interactive tree. Validation checks syntax only. It does not check your data against a JSON Schema.

Can I edit JSON with comments, such as tsconfig.json or VS Code settings?

You can open and edit it, but Validate, Format, and Minify use the browser's strict JSON.parse, which rejects comments and trailing commas. Formatting would therefore fail. Remove the comments first, or run the file through the JSON Repair tool, which strips them.