json

FormatValidateConvert

How-to guides, each with a worked example

Guides

Four tools that share one engine. Start from what you have in front of you, or from the tool you have open. Every guide opens with an example: the text to paste, the presses to make, and the result you should see.

6 sections · 24 jobs · 85 guidesNothing you paste is uploaded

What’s in front of you?

straight to the guide

Which tool do you have open?

or browse by tool

Your first five minutes

one broken document, three steps
1

Paste it and press Repair

// orders export, pasted from the admin console
{
  id: 'ORD-311',
…
  paid: true,
}

Keys get their quotes, single quotes turn double, the comment and the stray commas go.

2

Read it in the tree

root {…}
  id: "ORD-311"
  customer: {…}
  items: […]
  paid: true

No press needed: the right pane fills in the moment the repair lands.

3

Find what you came for

Find: sku
1/2
/items/0/sku
/items/1/sku

The counter, then each match’s address. The rows light up in the tree as well.

Each step starts where the one before it left off.Walk through it with the full examples ↓

Whichever tool you use

Recipes

4 jobs · 7 guides

Jobs that cross two tools, each worked through as a chain of examples where one step’s result is the next step’s input.

Tools with a page of their own

About these guides

This site is four tools that share one engine. The editor is where a document you are working on lives; Convert turns one format into another; Generate writes types and schemas from a document; and the JWT decoder reads a token. The guides follow the same division, so start from the tool you have open rather than from the name of a feature.

Inside a tool’s section the guides are arranged by the job you came to do, and each one opens with a worked example: the exact text to paste, the presses to make, named as the screen names them, and the result you should get. Those results are produced by running the real engine, so what a guide prints is what you will see. Under each example, a Try it link opens the tool the example is about with its document already in place.

All of it runs in your browser. Nothing you paste is uploaded, so you can follow along with a file of your own, including one holding data you would not share, and a tool you already have open keeps working with the network disconnected.

Jobs that cross two tools, each worked through as a chain of examples where one step’s result is the next step’s input. They start from the job rather than the tool, so each one is filed under what you have in front of you. The tests behind them check every hand-off as well as every result, so a step never starts from a document the step before it could not have produced.

If you have not settled on a tool yet, start with the one thing almost everyone arrives with: a document that will not parse. The three blocks below take one of them — an order copied out of an admin console, with a comment on top and quotes of the wrong kind — and carry it through the editor from broken text to an answer. Each block begins where the one before it left off.

1 · Paste it and press Repair

Input

// orders export, pasted from the admin console
{
  id: 'ORD-311',
  customer: { name: 'Mina Patel', city: 'Leeds' },
  items: [
    { sku: 'TEA-12', qty: 2 },
    { sku: 'CUP-04', qty: 6 },
  ],
  paid: true,
}

Do

  1. Paste the input into the left pane of the editor.
  2. Press Repair in the editor band.

Result

Removed trailing commas (2)
Quoted bare property names (10)
Converted single-quoted strings (5)
Removed comments

{
  "id": "ORD-311",
  "customer": { "name": "Mina Patel", "city": "Leeds" },
  "items": [
    { "sku": "TEA-12", "qty": 2 },
    { "sku": "CUP-04", "qty": 6 }
  ],
  "paid": true
}

Try it in the editor →

The fixes come first, one a line; the status bar strings the same sentences together after Repaired —. Keys that had no quotes now have them, the single quotes are double, and the comment and the two commas that would stop a parser are gone. Nothing else moved.

2 · Read it in the tree beside it

Input

{
  "id": "ORD-311",
  "customer": { "name": "Mina Patel", "city": "Leeds" },
  "items": [
    { "sku": "TEA-12", "qty": 2 },
    { "sku": "CUP-04", "qty": 6 }
  ],
  "paid": true
}

Do

  1. Look across at the right pane, which opens in Tree beside the text.

Result

root {…}
  id: "ORD-311"
  customer: {…}
    name: "Mina Patel"
    city: "Leeds"
  items: […]
    0: {…}
      sku: "TEA-12"
      qty: 2
    1: {…}
      sku: "CUP-04"
      qty: 6
  paid: true

Try it in the editor →

You did not have to press anything for this one. The editor opens with the text on the left and a tree of the same document on the right, so the moment the repair lands, the tree fills in: one row per value, the nesting shown by the indent, and a small document opened all the way down. A long one opens only as deep as fits.

3 · Find what you came for

Input

{
  "id": "ORD-311",
  "customer": { "name": "Mina Patel", "city": "Leeds" },
  "items": [
    { "sku": "TEA-12", "qty": 2 },
    { "sku": "CUP-04", "qty": 6 }
  ],
  "paid": true
}

Do

  1. Press ⌘F on a Mac or Ctrl+F on Windows and Linux, with the caret in the left pane.
  2. Type sku, then press Enter to step to the next match.

Result

1/2
/items/0/sku
/items/1/sku

Try it in the editor →

The counter says you are on the first of two, and each line under it is a match’s address as a JSON Pointer. Both matches are keys, so this plain search found the field rather than a value; the scope menu narrows it to one or the other. Rows in the tree light up as well as the text.

That is the editor’s loop — get it in, make it valid, look, search — and the Editor section takes each part further.