JSON Prettifier
Prettify and format raw or compressed JSON with custom indentation. Choose between 2 spaces, 4 spaces, or tabs, and optionally sort keys alphabetically for cleaner, more readable output.
JSON Prettifier & Formatter
Paste raw or compressed JSON and format it with custom indentation and optional key sorting.
JSON Prettifier and Formatter Overview
This JSON prettifier transforms raw, minified, or poorly formatted JSON into clean, human-readable output with configurable indentation. Running entirely in-browser with vanilla JavaScript, the tool parses input using the native JSON.parse() method and re-serialises it with JSON.stringify() using your chosen indentation style. Every operation occurs client-side β no data is uploaded to any server, ensuring complete privacy for sensitive configuration files, API responses, or data exports.
You can choose between 2-space, 4-space, or tab indentation, and optionally sort object keys alphabetically for deterministic, diff-friendly output. The stats row displays the before-and-after byte sizes and total line count, giving you immediate feedback on how formatting affects file size. The tool also functions as a JSON validator: invalid input produces a clear error message with the parser's exact position information.
Real-World Applications and Use Cases
A backend developer inspecting a REST API response can paste the raw payload into the prettifier to immediately see the structure with proper indentation. The sort-keys feature makes it easy to compare two similar responses side by side when debugging serialisation issues.
DevOps engineers working with JSON configuration files for tools like ESLint, Prettier, or tsconfig can normalise formatting across a team by running configs through the prettifier with consistent indentation settings. The byte-size stats help identify unnecessarily large config files.
Analysts who export JSON data from databases or APIs can format it before sharing with colleagues. The sorted keys option produces a canonical representation that simplifies code review and makes it trivial to spot missing or unexpected fields in pull requests.
Related tools
Deep-Dive: JSON Parsing and Serialisation Mechanics
The prettifier operates in three distinct stages: parsing, optional sorting, and serialisation. The parsing stage uses the native JSON.parse() method, which implements the ECMAScript JSON grammar per the ECMA-404 and RFC 8259 specifications. This method validates the input against the strict JSON grammar β any deviation, such as trailing commas, single quotes, or unquoted keys, triggers a SyntaxError with the exact line and column position of the failure.
Key Sorting Algorithm
When the sort-keys option is enabled, the tool performs a recursive traversal of the parsed object tree using a depth-first approach. At each object level, Object.keys() collects the property names, which are then sorted lexicographically using the default JavaScript comparison (UTF-16 code unit ordering). The sorted keys are assigned to a new object in order, and the process recurses into nested objects and arrays. This produces deterministic output regardless of the original key insertion order.
Serialisation with JSON.stringify()
The final stage calls JSON.stringify(obj, null, indent) where indent is either a number (2 or 4 spaces) or the tab character. The native implementation handles all JSON types correctly, including edge cases such as null, Infinity (serialised as null), NaN (serialised as null), and circular references (which throw a TypeError). The byte-size comparison uses TextEncoder for accurate UTF-8 byte counts.
Frequently Asked Questions
Does sorting keys change the meaning of the JSON?
No. JSON object key order is not semantically significant per the ECMA-404 and RFC 8259 specifications. Sorting keys alphabetically makes the output deterministic and easier to diff or compare across different API versions or configuration files.
Can it handle very large JSON files?
Yes. The tool runs entirely in the browser using native JSON.parse(), which is highly optimised in all modern JavaScript engines. For files over 50 MB, parsing and formatting may take a moment, but the browser remains responsive during processing because the work is performed synchronously on the main thread in small bursts.
What happens if the JSON is invalid?
The tool displays a parse error with the exact line and column position where the issue was detected, using the error message from the native JavaScript engine. Common issues include trailing commas, single-quoted strings, unquoted property names, and missing closing brackets. Fix the reported error in the input and click Prettify again.
Why use tabs instead of spaces for indentation?
Tabs produce smaller file sizes because each indentation level is a single character rather than multiple space characters. Additionally, tabs let each developer configure their preferred visual width in their editor. Some style guides, such as those used in Go and Rust projects, mandate tabs for indentation as a project convention.
Does the tool preserve the original value types?
Yes. The round-trip through JSON.parse() and JSON.stringify() preserves all JSON types exactly: strings, numbers, booleans, null, arrays, and objects. Numbers that exceed JavaScript's safe integer range (above 2^53) may lose precision due to IEEE 754 double-precision representation, which is a limitation of the JSON specification itself.