JSON Formatter
Format, validate and minify JSON. Errors with exact line, tree view, sort keys. No sign-up, no server.
Need to generate secure passwords or count words in a document?
How to use the JSON formatter?
- 1
Paste your JSON or load a sample
Paste any JSON into the left panel or click the Sample button to load an example JSON with nested objects, arrays and different value types. The validator analyses the content instantly, character by character.
- 2
Check errors with exact line and column
If the JSON contains a syntax error, a red banner appears at the bottom indicating the exact line and column where the problem occurred, along with the original error message from the JavaScript interpreter. Compatible with Chrome, Firefox and Safari.
- 3
Format, minify or enable Sort Keys
Use the indent selector (2 spaces / 4 spaces / tab) to beautify the JSON. Press Minify to compact it into a single line with no spaces. Enable Sort Keys to alphabetically sort all keys in the JSON recursively, which makes it easier to compare two JSONs.
- 4
Explore the tree view, copy or download
Switch to the Tree view to navigate the JSON structure visually: click any object or array to expand or collapse it. Nodes deeper than level 2 are collapsed by default. When the result is ready, copy it to the clipboard or download it as a .json file.
Formatter features
✅ Real-time validation
JSON is validated as you type, with no button press needed. The error is detected with the exact position by extracting information from the native JavaScript engine message, working consistently in Chrome, Firefox and Safari.
🌈 Syntax highlighting with zero dependencies
Syntax colouring is implemented with a pure regular expression over the formatted text. Keys are shown in violet, strings in emerald green, numbers in sky blue, booleans in amber and nulls in red. No Monaco, no CodeMirror — instant load.
🌲 Interactive tree view
The tree view renders JSON as a tree of collapsible React components. Each node shows the type with colour: objects, arrays, strings, numbers, booleans and null. Collapsed nodes show a summary ('3 keys', '5 items'). Auto-expands to depth 2 on load.
🔡 Recursive sort keys
When Sort Keys is enabled, all keys in all objects in the JSON (including nested ones at any depth) are sorted alphabetically. The result is deterministic: the same JSON always produces the same output, making it easy to diff two versions.
📊 Stats panel
When the JSON is valid, a green panel appears automatically with metrics: number of objects, arrays, total keys, maximum tree depth, strings, numbers, nulls, booleans and the size in bytes or KB of the current output.
🔒 100% in the browser
All processing — parsing, formatting, analysis, colouring — happens entirely in your browser with pure JavaScript. No data is sent to any server. You can use this tool with JSONs containing confidential data or environment credentials.
Frequently asked questions
How do I know which line has the error?
The formatter extracts the error position directly from the message thrown by the browser's native JavaScript engine. In Chrome and Edge it gets the character position and calculates line and column by scanning the text. In Firefox and Safari it reads 'line N column M' directly from the message. The result is a red banner with the exact line and column.
What is JSON minification and when should I use it?
JSON minification removes all unnecessary whitespace, line breaks and indentation to produce the most compact JSON possible. It is useful when you want to reduce the size of data sent over a network (APIs, HTTP headers), store JSON in databases, or include it as a value in an HTML attribute.
What is Sort Keys for?
Sort Keys sorts all keys in all objects in the JSON alphabetically in a recursive manner. It is especially useful for comparing two JSONs with diff tools (such as git diff), generating deterministic outputs in automated tests, or simply improving readability when the JSON has many keys.
What is the tree view?
The tree view represents the JSON as a visual tree structure where you can expand and collapse objects and arrays by clicking. It is more comfortable than the code view when the JSON has many levels of nesting and you want to explore a specific branch without losing the context of the rest of the structure.
Is my JSON sent to any server?
No. All processing — parsing, validation, formatting, stats analysis and syntax highlighting — happens entirely in your browser with pure JavaScript, without any network request. You can use this tool with JSONs containing API tokens, database credentials or any sensitive data.
Embed the formatter on your site
You can embed this JSON formatter in any web page with a simple iframe:
<iframe
src="https://miguelacm.es/embed/json-formatter"
width="100%"
height="700"
frameborder="0"
title="JSON Formatter"
></iframe>