JSON Viewer
Format and read JSON with syntax highlighting, structure validation and metrics.
JSON Input
Output
⚡ Real-time result
Output will appear here…
What is the JSON Viewer?
The JSON Viewer is a tool for formatting, validating and analyzing JSON (JavaScript Object Notation) data. It makes minified or unreadable JSON easy to inspect, helps you catch syntax errors instantly, and shows you the structure of any dataset at a glance.
What is JSON?
JSON is a lightweight data-interchange format based on JavaScript object syntax. It is used everywhere: REST APIs, configuration files, databases, webhooks. A valid JSON document can contain:
- Objects
{}— key/value pairs - Arrays
[]— ordered lists of values - Strings — text wrapped in double quotes
- Numbers — integers or decimals
- Booleans —
true/false - Null — absence of a value
Available modes
- Format (2 spaces) — Pretty-print with 2-space indentation: the web/API standard
- Format (4 spaces) — Pretty-print with 4-space indentation: preferred in many editors
- Minify — Strips all whitespace and newlines for maximum compactness
- Validate — Only checks whether the JSON is syntactically valid
Syntax Highlighting
The tool automatically colour-codes each JSON element:
- Blue → keys (property names)
- Green → string values
- Orange → numbers
- Purple →
true/false - Grey →
null
Common JSON mistakes
- Trailing comma:
{"a":1,}— not allowed in JSON (unlike JavaScript) - Single quotes:
{'key':'val'}— strings must use double quotes - Unquoted keys:
{key: "val"}— keys must be quoted strings - Comments:
// comment— not supported in JSON (use JSONC instead) - NaN / Infinity — not valid JSON values
FAQ
Is processing done on the server or in the browser?
Syntax highlighting and real-time formatting happen 100% in your browser. Your data is never sent anywhere.
Is there a size limit for JSON input?
There is no hard limit. For very large files (>1 MB) the browser may take a moment to process.
What is the difference between JSON and JSONC?
JSONC (JSON with Comments) extends JSON by allowing
// and /* */ comments. It is used in configuration files (VS Code, tsconfig.json) but is not standard JSON.What does the depth metric in the stats bar mean?
Depth shows how many nesting levels the structure has.
{"a":{"b":{"c":1}}} has a depth of 3. Deeply nested structures (>5) can indicate a complex schema.