Skip to content
jsonblocks

JSON data types, visually explained

Six types, six colors: this visual tour shows how jsonblocks paints every JSON value so you can read structure at a glance. Open the viewer alongside and follow each example live.

Reading raw JSON means pattern-matching punctuation: is 1024 a number or part of a string? Did that null come with quotes? Type badges remove the ambiguity by labeling every value with its type in its own color.

The six badges

  • string (green): double-quoted text. The quotes are the type - "1024" is text, 1024 is a number.
  • number (blue): integers and decimals, bare. No hex, no NaN, no Infinity.
  • boolean (amber): exactly true or false, lowercase and unquoted.
  • null (gray): explicitly empty. Italic, to separate it from the string "null".
  • object (orange): key-value pairs. The badge shows the key count at a glance.
  • array (cyan): ordered values. The badge shows the item count and indices.

Try it on a mixed document

json
{
  "name": "Ada Lovelace",
  "id": 1024,
  "score": 98.6,
  "verified": true,
  "nickname": null,
  "roles": ["admin", "editor"],
  "address": { "city": "London" }
}

Paste this into the viewer: seven values, six badges. Toggle the badges off and on to feel how much structure the colors carry - then toggle array indices and watch $[1] addressing appear on every item.

Why types matter in practice

  • API bugs hide in type confusion: a string "49.99" where code expects a number breaks totals silently.
  • null vs missing changes semantics: clearing a field versus leaving it alone.
  • Validation errors almost always reduce to one value of the wrong type at one path.

Once you read types fluently, the validator's line-and-column reports and the path finder's previews click into place: every tool in jsonblocks speaks the same six-type language.

Frequently asked questions

Can I hide the type badges?

Yes. The Type badges checkbox in any viewer toolbar toggles them, and array indices toggle separately. The colors stay on the values themselves either way.

Do the colors mean anything beyond the type?

No - one color per type, consistently across the viewer, the validator summary, and the path finder. Depth is shown by nesting, not color.