ds
Operations
JSON viewer

JSON viewer

Collapsible objects with typed values.

{7 keys}

"id": "evt_71ab3c",

"type": "order.paid",

"created": "2026-10-11T09:02:07.412Z",

"livemode": true,

"attempts": 3,

"data": {5 keys},

"order_id": "ord_9f2k4x",

"amount": 248900,

"currency": "INR",

"customer": {3 keys},

"id": "cus_q81n",

"email": "priya@example.in",

"segment": null

"items": [2 items]

{3 keys},

"sku": "SKU-1042",

"qty": 2,

"unit": 99900

{3 keys}

"sku": "SKU-0007",

"qty": 1,

"unit": 49100

}

]

"delivery": {3 keys}

"endpoint": "https://hooks.acme.in/orders",

"last_status": 504,

"next_retry_s": 4.1

}

Show code

<div class="json">
  <details open data-path="$">
    <summary>{<span class="j-n">7 keys</span><span class="j-c">}</span></summary>
    <div class="j-in">
      <div class="j-row" data-path="$.id"><span class="j-k">"id"</span>: <span class="j-s">"evt_71ab3c"</span>,</div>
      <div class="j-row" data-path="$.attempts"><span class="j-k">"attempts"</span>: <span class="j-num">3</span>,</div>
      <details data-path="$.data.items">
        <summary><span class="j-k">"items"</span>: [<span class="j-n">2 items</span><span class="j-c">],</span></summary>
        …
      </details>
      …
    </div>
    }
  </details>
</div>

A webhook payload, as an event log or an API console would show it. Each object and array is a native <details>, so it folds without script; folded, it shows how many keys or items it holds. Values are typed by colour: strings green, numbers amber because they are data at rest, booleans the accent, null faint. Keys stay in ink, punctuation steps back. Click a value here to copy its path.

Path: $

Class	On	What it does
`.json`	div	The frame: mono, scrolls sideways.
`details / summary`	.json	An object or array. The summary holds the key, the opening bracket, a `.j-n` count and a `.j-c` closing bracket, both shown only when folded.
`.j-in`	div	Children, on an indent guide.
`.j-row`	div	A key and a scalar value. `.on` highlights a row.
`.j-k`	span	A key.
`.j-s / .j-num / .j-b / .j-null`	span	String, number, boolean, null.

Fold large arrays by default and show their length.
Put the JSON path in data-path so a click can copy $.data.items[0].sku.
Keep the order of keys as received.

Don't

Sorting keys alphabetically in a debugging view. Order can matter.
Colouring keys. They are the labels; values are the data.
Truncating long strings without a way to see them whole.

Accessibility

Native <details> gives keyboard folding and the expanded state for free.
Types are also visible in the text: strings are quoted, null is spelled out.