JSON Editor — Examples

Back to the overview: JSON Editor · Open the tool live: www.jpkc.com/tools/json/

The manual explains every feature and view in detail. This page adds concrete workflows: typical tasks, walked through step by step. Button and view names appear exactly as they do in the tool's interface.

Example 1: Make nested JSON readable

The classic — you have an API response on a single endless line and want to see what's in it.

1. Open the JSON Editor and switch to the Text view.
2. Paste the compact JSON — something like:

{"user":{"id":42,"name":"Ada","roles":["admin","editor"]},"active":true}

3. Click Format (or press Ctrl+I). The editor indents everything cleanly with two spaces:

{
  "user": {
    "id": 42,
    "name": "Ada",
    "roles": [
      "admin",
      "editor"
    ]
  },
  "active": true
}

4. To get an overview of deep structures, click tree in the menu bar and collapse and expand the nodes. That way you stay oriented even in large responses. As a bonus, the footer tells you how deeply the structure is nested and how many objects, keys and values it holds.

Example 2: Validate and repair broken JSON

You copied JSON from a log or a config, and something's off.

1. Paste the snippet into the Text view — for example, with several typical mistakes at once:

{
  name: 'Ada',
  roles: ['admin', 'editor',],
}

Here the keys aren't quoted, there are single instead of double quotes, and there are trailing commas. The editor flags the error spot immediately, and the footer names the error with line and column — the real-time validation tells you where it breaks.

2. Click Repair in the toolbar. The mistakes are fixed in one go, and the original's line breaks and indentation stay as they were:

{
  "name": "Ada",
  "roles": ["admin", "editor"]
}

Alternatively, the Text view offers Auto repair itself when there's a parse error.

3. If you want the result indented consistently, click Format afterwards. Don't like the repair? Ctrl+Z takes it back.
4. If an error remains after the repair (with structurally wrecked input), the tool reports "Repaired, but: …" with the cause. Fix that spot by hand in the Text view — validation turns green as soon as the JSON is well-formed.

Important: this is a syntax repair. Whether your fields are correct in substance (right types, required keys) is what a JSON Schema checks — see Example 7.

Example 3: Scan an array of objects in the table

API responses are often arrays of uniform objects. Those are best read as a table.

1. Load or paste an array of objects:

[
  { "id": 1, "name": "Ada", "active": true },
  { "id": 2, "name": "Linus", "active": false },
  { "id": 3, "name": "Grace", "active": true }
]

2. Click table in the menu bar to switch to the table view. The fields id, name and active become columns, each entry becomes a row — just like a spreadsheet.
3. Sort by clicking a column header (e.g. by name), edit values directly in the cells, and add or remove rows as needed.
4. Need the result as a file again? Choose File → Download (Ctrl+S) for a formatted JSON file. The download carries the name of the last loaded source, such as the file you opened; without one it's data.json (details in the manual).

Tip: if the structure is deeply nested or irregular, the table is less helpful. Then stay in the Tree view.

Example 4: Minify JSON for shipping

For a config, a data attribute or compact transmission you want the opposite of "readable": as small as possible.

1. Paste your formatted JSON (or format it first with Format).
2. Click Compact. The editor switches to the Text view, removes all extra whitespace and line breaks and squeezes everything onto a single line:

{"user":{"id":42,"name":"Ada","roles":["admin","editor"]},"active":true}

3. File → Copy puts the result straight on the clipboard — ready to embed.

Want to keep your nicely formatted document and just take a compact version with you? No detour needed: File → Copy compact copies the minified version, and File → Download compact (.min.json) saves it as <name>.min.json — the editor content stays as it is.

If you also want a stable, reproducible order (e.g. to compare two files), click Sort keys first: it sorts all keys recursively, so the same object always looks the same.

Example 5: Filter, sort and pick fields with Transform

You want just a slice of a large list — without deleting by hand.

1. Load your array of objects (see Example 3), for instance in the Tree or Table view.
2. Open the Transform tool from the editor's menu bar or the context menu (right-click).
3. In the wizard you can combine three things:
   • filter — e.g. only entries with active = true,
   • sort — e.g. by name, ascending,
   • pick fields (projection) — keep only id and name.
4. The live preview shows the result immediately. When it's right, apply the transformation.

Behind the scenes the wizard writes a query in JSONQuery, which you can also edit directly in the dialog — handy for more complex reshaping. And like everything in the editor, a transformation can be undone with Ctrl+Z. To quickly find a spot, the search in the Tree or Text view is often enough.

Example 6: Load a file, sort keys, keep working — and save your state

A continuous mini-workflow from open to save.

1. Choose File → Open file… (Ctrl+O) and pick a .json file from your disk — or just drag the file onto the editor card. Valid JSON lands in the current view right away; if the file is broken, it opens in the Text view — then Repair helps (see Example 2).
2. Click Sort keys to put all keys in order — good for overview and for comparisons.
3. Keep working in the right view (edit values in the tree, table for lists, text for the raw view). Your work is saved automatically in the browser — an accidental reload costs you nothing. The badge in the card header shows Saved locally; for documents over 2 million characters it reads Not saved — too large, and you save with Download instead.
4. When you're done, save with File → Download (Ctrl+S). The file carries the name you opened it under. Working on a shared machine with sensitive data? Choose File → Clear afterwards — the empty state also overwrites the copy saved in the browser.

Example 7: Check data against a JSON Schema

The syntax is fine — but does the data match the agreed format? That's what a JSON Schema settles. The tool's sample document (File → Load example) lets you try it right away.

1. In the product list, change the price of the second entry to the string "3,90" and delete the name field of the third entry.
2. Click Schema and paste this schema into the text area:

{
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "type": "object",
  "required": ["shop", "products"],
  "properties": {
    "products": {
      "type": "array",
      "items": {
        "type": "object",
        "required": ["id", "name", "price"],
        "properties": {
          "id": { "type": "integer" },
          "name": { "type": "string" },
          "price": { "type": "number", "minimum": 0 }
        }
      }
    }
  }
}

3. Click Validate. The dialog reports "2 problems — marked in the editor" and lists the findings:

/products/1/price: Instance type "string" is invalid. Expected "number".
/products/2: Instance does not have required property "name".

4. Close the dialog: both spots are marked as warnings in the editor. Fix them and the markers disappear immediately — the schema stays active, as the yellow Schema badge in the card header shows.
5. If the schema lives in a file, use Open schema file… instead of the text area. Once you no longer need the check, Remove schema switches it off and deletes the schema from browser storage.

Example 8: Load an API response straight from its URL

Instead of downloading an API response first and then opening it, let the editor fetch it.

1. Choose File → Load from URL….
2. Enter the address — for example the JSON feed of this knowledge base, https://www.jpkc.com/db/feed.json — and click Load.
3. The response lands in the editor. The fetch is handled by a proxy on the website's server — the only feature of the tool that involves one. It loads public addresses up to 2 MB only — APIs that require a token or login won't work this way.
4. Now you can work with the response like any other document: click through it in the Tree view, scan the list of entries in the Table view, filter it with Transform. A download is named after the last part of the URL, here feed.json.

Were you working on another document before? Ctrl+Z brings it back.

There's more on the subpages: the overview for the big picture, the manual for every feature in detail and the tips & tricks for the finer points. You can try it all directly in the tool.