JSON Formatter
Prettify, minify, sort keys, and format API JSON responses.
Formatting JSON for development workflows
JSON is the lingua franca of modern APIs, browser storage, and configuration overlays. Readable JSON speeds up code review; minified JSON reduces payload size for mobile clients and fixture files. A dedicated formatter hub lets you prettify, compress, sort keys, and normalize API responses without leaving the browser.
Invalid JSON fails fast with a parser error pointing at the mistake. Common issues include trailing commas, single-quoted strings, and unescaped control characters inside strings. Always validate after edits from generators or log exporters before committing fixtures to your repository.
Sorting keys produces stable diffs when serializers reorder fields. That matters in Git reviews of config changes and when comparing two API versions that should be semantically identical. Pair sorted output with your CI JSON linter so local results match pipeline checks.
API gateways and reverse proxies sometimes log compressed single-line bodies. Pasting those logs into prettify mode reveals nested error objects and correlation IDs that are hard to spot in terminal wrap. Redact authorization headers and PII fields before sharing formatted output in tickets.
Snapshot tests compare serialized strings, not semantic objects. Two objects with identical data but different key order fail Jest or Vitest snapshots even when runtime behavior matches. Sort keys before committing fixtures to eliminate ordering noise while keeping values unchanged.
Minify mode helps when embedding JSON inside environment variables or build-time constants where byte size matters. Verify the minified string still parses in the target runtime; some embedded parsers reject certain Unicode escapes that prettify mode would have exposed.
Use this formatter when debugging HTTP responses, preparing mock data, or teaching teammates what a nested payload contains. Processing stays on your machine, which is important when responses include internal hostnames, user emails, or unreleased feature flags.
Real-world scenario
Stabilizing a CI snapshot fixture
A pull request fails because Jest snapshot tests diff on key order changes in a mock API response. The raw JSON is valid but unreadable on one line.
- 1
Paste the failing response
Copy the JSON body from the test failure or network tab into the formatter hub. Fix any parser errors first (trailing commas, single quotes).
- 2
Sort keys
Run sort keys mode so field order is alphabetical regardless of how the serializer emitted the object. This removes noisy diffs when only ordering changed.
- 3
Prettify for review
Switch to prettify mode with consistent indentation so reviewers can see nested user, tenant, and feature flag objects in the PR diff.
- 4
Replace the fixture file
Copy formatted output into __fixtures__/api-me.json (or your project convention) and re-run tests locally before pushing.
- 5
Pair with schema validation
If the response must match OpenAPI, validate the updated fixture against your spec so renamed fields do not slip through sorted snapshots.
Part of the Prepare test fixtures workflow, which chains related DevPipe tools for the full task.
Reference Guide
JSON must be valid before prettify or minify. A single trailing comma or unquoted key breaks the parser.
| Mode | When to use |
|---|---|
| Prettify | Readable output for PRs, logs, and API debugging |
| Minify | Smaller payloads for mobile clients or storage fixtures |
| Sort keys | Stable diffs when key order changes between serializers |
| API response | Same as prettify, tuned for HTTP response bodies |
Before and after (prettify):
Input (invalid trailing comma fails parse):
{"user":{"id":1,"name":"Ada"},"active":true}Output (prettified):
{
"active": true,
"user": {
"id": 1,
"name": "Ada"
}
}Sort keys for snapshot tests:
# Unstable order from API
{"z":1,"a":{"y":2,"b":3}}
# After sort keys
{"a":{"b":3,"y":2},"z":1}Large integers may lose precision in browser JSON parsers. Treat IDs as strings when values exceed 253 - 1.
Current mode
Operation: json-prettify
- Paste raw JSON from APIs, logs, or config files.
- Output uses 2-space indentation by default.
All processing runs locally in your browser. Paste input, click Run, and copy the result.
Example Input
{"name":"DevPipe","tools":200}A sample loads automatically when you open this tool. Use Load Sample to reset it.