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. The tool's interface is in English, so button and view names appear as they do in the actual UI.

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. 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, switch to the Tree view and collapse and expand the nodes. That way you stay oriented even in large responses.

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's a trailing comma. The editor flags the error spot immediately — the real-time validation tells you where it breaks.

2. The editor flags the JSON as invalid and offers an auto-repair inline in the Text view. Accept it — the three problems are fixed automatically:

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

3. If an error remains after repair (with fundamentally ambiguous input), the message shows the cause. Fix the spot by hand in the Text view and check again — validation turns green once the JSON is well-formed.

Important: this is a syntax repair. Whether your fields are correct in substance (right types, required keys) is not something the editor checks — for that you'd need a JSON schema.

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. 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? Click Download for a formatted data.json.

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 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. With Copy, the result goes straight to the clipboard — ready to embed.

If you also want a stable, reproducible order (e.g. to compare two files), click Sort first: that sorts all keys recursively and alphabetically, 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) and stay in the Tree view.
2. Open the Transform tool from the context menu (right-click) or the menu.
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.

For recurring, more complex reshaping you can write a query directly in the JavaScript query language instead of using the wizard. To quickly find a spot, the search in 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. Click Open and pick a .json file from your disk. Valid JSON lands as a structure right away; if the file is broken, it loads as raw text — then the Text view's auto-repair helps (see Example 2).
2. Click Sort to order all keys alphabetically — 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.
4. When you're done, click Download for a formatted data.json. Working on a shared machine with sensitive data? Hit Clear afterwards — that also deletes the state saved in the browser.

---

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.