JSON Formatter: Beautify & Validate JSON Online Free
Free online JSON formatter that indents and validates JSON as you type, checking syntax against RFC 8259 and keeping large integers exact, unlike JSON.parse().
JSON Formatter
Format and beautify your JSON with this simple tool - formatting happens automatically as you type!
Formatted JSON will appear here automatically...
Documentation
What is a JSON formatter?
A JSON formatter is a tool that takes JSON (JavaScript Object Notation) text and rewrites it with indentation and line breaks, without changing the data itself. JSON is a plain-text format for storing and sending structured data, built from name/value pairs and lists. Programs usually save space by removing all extra whitespace, which produces a single dense line that is hard for a person to read. A formatter, also called a beautifier or pretty printer, adds that whitespace back in a consistent way so the structure is visible. This tool formats JSON automatically as it is typed or pasted, with no buttons to press.
JSON syntax rules
JSON is defined by a specification called RFC 8259. It has two container types:
Objects hold name/value pairs inside curly braces:
1{"name": "John", "age": 30, "city": "New York"}
2Arrays hold ordered lists inside square brackets:
1["apple", "banana", "cherry"]
2A value in JSON must be one of six types: a string, a number, a boolean (true or false), null, an object, or an array.
A few rules cause most errors:
- Property names must be wrapped in double quotes.
{name: "John"}is invalid; it must be{"name": "John"}. - Strings must use double quotes, not single quotes.
- A comma cannot follow the last item in an object or array (no trailing commas).
- JSON has no comment syntax, even though its brace-and-bracket look comes from JavaScript.
- JSON has no
undefined. Usenullfor a missing value.
A common mistake is pasting a JavaScript object literal instead of JSON. {name: 'John', age: undefined} is valid JavaScript but not valid JSON. The JSON version is {"name": "John", "age": null}.
How this JSON formatter works
Many JSON formatters run the text through JSON.parse() to build a JavaScript object, then run JSON.stringify() to turn it back into text with spacing. That round trip has a side effect: JavaScript numbers are IEEE 754 double-precision floats, which cannot represent every integer exactly once they pass 2^53 − 1 (9,007,199,254,740,991). An ID like 9007199254740993 can come out as 9007199254740992 after that round trip.
This tool avoids that step. It reads the input character by character with a small hand-written parser, and instead of converting each number or string into a JavaScript value, it copies that piece of text exactly as written, then places it at the correct indentation level. Because numbers are never converted to a float, integers of any size keep their exact digits. If an object has the same key written twice, both copies are kept in place rather than being collapsed to the last one, which is what building a JavaScript object would do.
The process, step by step:
- Read the next token (an object, array, string, number,
true,false, ornull). - Check it against the JSON grammar. Reject it if it breaks a rule, such as an unquoted key or a trailing comma.
- Copy the token's text unchanged into the output.
- Add a line break and indent by 2 spaces for each level of nesting inside an object or array.
- Repeat until the whole input has been read.
Indentation is fixed at 2 spaces; there is no setting to change it. If the input is empty, nothing is shown. If the input breaks a JSON rule, the tool shows the message "Invalid JSON: Please check your input" rather than a technical parser message with the exact character position. Browsers' built-in JSON.parse(), by contrast, does report a character position in its error text.
Worked example
This minified input:
1{"name":"John Doe","age":30,"address":{"street":"123 Main St","city":"Anytown","state":"CA"},"hobbies":["reading","hiking","photography"]}
2becomes:
1{
2 "name": "John Doe",
3 "age": 30,
4 "address": {
5 "street": "123 Main St",
6 "city": "Anytown",
7 "state": "CA"
8 },
9 "hobbies": [
10 "reading",
11 "hiking",
12 "photography"
13 ]
14}
15Each nested object or array is indented one more level than its parent, so the relationship between address and its three fields is visible at a glance.
A second example shows why copying literals matters. This input:
1{"id":9007199254740993}
2formats to:
1{
2 "id": 9007199254740993
3}
4The digits stay exactly as typed. A formatter built on JSON.parse() followed by JSON.stringify() would silently turn that number into 9007199254740992 instead.
Common JSON errors
- Unquoted property name:
{name: "John"}. Fix:{"name": "John"}. - Trailing comma:
{"age": 30,}. Fix: remove the comma before the closing brace. - Mismatched brackets:
{"data": [1, 2}. Fix: close the array with]before closing the object. - Unclosed string:
{"name": "John}. Fix: add the missing closing quote. - Single quotes:
{'name': 'John'}. Fix: use double quotes. undefined,NaN, orInfinity: none of these are valid JSON values. Usenullor a string.
A frequent source of these errors is copying an object straight out of a browser console or a server log, which often includes JavaScript-only syntax that needs cleanup before it is valid JSON.
When to use a JSON formatter
JSON formatters are used most often to inspect API responses, which are usually sent minified to save bandwidth. They are also used to check configuration files such as package.json or tsconfig.json by hand, to read data copied from a browser's local storage or console, and to understand the shape of a dataset received from another system.
Other ways to format JSON
- Browser developer tools: Chrome, Edge, and Firefox format JSON responses automatically in the Network tab's preview pane.
- Code editors: Visual Studio Code formats an open JSON file with Alt+Shift+F (Shift+Option+F on a Mac). Most editors have an equivalent shortcut or a formatting extension.
- Command line:
jq(jq . file.json) and Python's built-inpython -m json.tool file.jsonboth format JSON from a terminal.
Building JSON formatting into code
Most programming languages include a JSON library with an indentation option. In JavaScript:
1const formatted = JSON.stringify(JSON.parse(rawJson), null, 2);
2In Python:
1import json
2formatted = json.dumps(json.loads(raw_json), indent=2)
3Both approaches parse the text into a native data structure and then re-serialize it with spacing. As shown above, this is simple to write but can change large integers, because both languages store numbers as doubles by default. Applications that need exact large integers, such as database IDs, typically store them as strings in JSON rather than as numbers.
A short history of JSON
Douglas Crockford specified JSON in the early 2000s, drawing its syntax from JavaScript object literals but making it usable from any language. RFC 4627 formalized it in 2006. It spread quickly because it was shorter to write than XML and mapped directly onto JavaScript objects, which mattered as web applications began fetching data in the background rather than reloading whole pages. By the 2010s it had become the default format for REST APIs and for databases such as MongoDB.
Frequently asked questions
What is a JSON formatter? A tool that adds indentation, line breaks, and spacing to JSON text so its structure is easy to read, without changing the data.
Does formatting change the data? No. Formatting changes only whitespace. This tool copies every string and number exactly as typed, so the values in the formatted output match the input precisely, including numbers too large to store exactly as a JavaScript number.
Why do I get an "Invalid JSON" error? The input breaks a JSON rule. Common causes are unquoted property names, a trailing comma, single quotes, an unclosed string, or a mismatched bracket. This tool does not show the exact character position of the problem; checking the input against the rules listed above usually finds it quickly.
Can JSON have comments? No. The specification does not allow them. Formats such as JSONC and JSON5 add comment support on top of JSON syntax for cases where that is useful, such as configuration files.
What is the standard JSON indentation? Two spaces is the most common convention in web development and is what this tool uses. Some style guides use four spaces or tabs instead; the JSON specification itself does not require any particular indentation.
What is the difference between JSON.parse() and JSON.stringify()?
JSON.parse() turns a JSON string into a JavaScript value. JSON.stringify() does the reverse, turning a JavaScript value into a JSON string, and accepts an indentation argument for pretty-printing. This tool does not use either function internally, which is what lets it preserve large integers exactly.