What each color in the editor means
JSON has six things worth painting, and every theme assigns them different hues. Once the mapping sits in your head, a malformed payload gives itself away before you read a character. A value that should be a number showing up in string color is the fastest bug you will find all day.
| Token | Example | What a surprise color tells you |
|---|---|---|
| Key | "userId": | Key styling on a value means a colon landed in the wrong place |
| String | "2026-08-12" | String color running past the closing quote means an unescaped quote inside the text |
| Number | 42.5 | Number color on "42.5" never happens, so quoted numerics stay obvious |
| Boolean | true | Plain text color means True or TRUE slipped in from Python or SQL |
| null | null | String color means someone wrote "null", which parses to a four character word |
| Punctuation | { } [ ] , : | Bracket matching on the cursor line is the quickest way to find an unclosed object |
Color is a reading aid, not a parser
The editor colors tokens with a lexer, which scans text without building a document. It happily paints something no parser would accept. The status line below the editor runs the real check with JSON.parse and reports the character position, which the page converts into a line and column you can jump to.
Four problems color will never surface
- Duplicate keys. Write
"id"twice in one object and both look identical. The parser keeps the last one and throws no error, so the first value disappears silently. - Precision loss.
12345678901234567890highlights as a clean number, then parses to a rounded float. Large IDs belong in strings for exactly this reason. - Wrong shape. A field your API expects as a number arriving as
"42"is valid JSON. Only a schema check catches the mismatch. - Comments and trailing commas. Both appear in
tsconfig.jsonand similar config files. Strict JSON rejects them, so this page flags them as errors even when your build tool accepts the file.
Picking a theme for the job in front of you
Theme choice is not decoration. It changes how fast you spot a boundary and how the result looks when it leaves your screen.
- Light themes for anything you screenshot
- Xcode and GitHub keep a white background, so a paste into a ticket, a pull request or a printed doc stays readable. Dark screenshots dropped into a light document read as a black rectangle at thumbnail size.
- Dark themes for long sessions
- Monokai and Dracula separate string, number and key by hue with high saturation. Good for an hour of tracing a response body in a dim room.
- Solarized when saturation tires you out
- Both Solarized variants sit on a narrow contrast range by design. Structure stays visible, hues stop shouting.
- A note on color vision
- Several popular themes lean on a red and green pair for strings against numbers, which flattens for anyone with deuteranopia. Tomorrow and Tomorrow Night Blue vary brightness along with hue, so the tokens stay apart without relying on the hue alone. The legend panel samples the live colors, which makes the difference easy to test before you commit to a theme.
Reading a payload you did not write
Most people land here holding a response body from a service they do not own. A run through in order:
- Copy the raw body from the Network tab rather than a rendered preview, so you get the exact bytes the client received.
- Paste it, then set indent to 2 spaces. Minified JSON arrives as one line, and highlighting alone will not help while everything sits at line 1.
- Read the deepest nesting figure in the side panel. Past six levels, map the path before you start scrolling.
- Scan for the token colored differently from its neighbours. Quoted numbers and stringified booleans stand out immediately.
- Take the path you need over to the JSON Path Tester and confirm the query returns what you expect.
When the document is too big for a browser tab
The editor stays smooth through a few megabytes. Beyond that, scrolling and selection turn sluggish, because the renderer keeps the whole document in memory while painting only the visible rows. Log exports and database dumps regularly cross the line. Split the file, or run jq locally, which streams instead of loading everything at once. Newline delimited JSON hits a different wall: each line is a separate document, so the parse check fails on line 2 even though the file is fine. Highlighting still works on it, the validity badge does not.
Nothing leaves this tab
The editor, the parse check and the download button all run client side. Your payload never reaches a server, which matters when a response body carries tokens, customer records or internal endpoints. The text does stay in the page until you reload, so use Clear before you walk away from a shared machine.
