What the JSON editor does
JSON (JavaScript Object Notation) is the text format most web APIs, configuration files and NoSQL databases use to exchange structured data: objects of key/value pairs, arrays, strings, numbers, booleans and null. This editor is for working on JSON directly in the browser, with syntax highlighting, collapsible objects and arrays, and a Format button that re-indents the whole document.
That last button is the JSON editor's own feature; the other language editors on this site don't have it. Click it and the document is parsed and printed again with two-space indentation. If the JSON is invalid, nothing changes and the parser's error message appears above the editor instead. You don't have to press Format to find mistakes, though: the editor checks the document as you type and marks the first error in place.
The rest of the toolbar works as in every editor here: Clear, Copy, Download (saves data.json), Word Wrap, Dark Theme, Find / Replace and Full Screen. Use the fold arrows in the gutter to collapse a large nested object while you work on another part of the file.
Editor, formatter or validator?
All three run in your browser, but they suit different jobs.
| You want to... | Use |
|---|---|
| Open, edit and save a JSON file, with search and folding | This JSON editor |
| Paste a minified API response and get readable output fast | JSON formatter |
| Get a clear yes/no on whether a document parses | JSON validator |
| Strip whitespace to make a payload as small as possible | JSON minifier |
Worked example
Paste this into the editor, then use Find / Replace to change "metric" to "imperial", and fold the settings object from the gutter:
{
"name": "weather-widget",
"version": "1.4.0",
"private": true,
"settings": {
"units": "metric",
"refreshMinutes": 15,
"showForecast": true,
"locations": ["Lisbon", "Osaka", "Toronto"]
},
"lastSync": null
}
Now add a trailing comma after null. A red marker appears in the gutter within a second, and clicking Format puts the full message above the editor. In Chrome it reads "Expected double-quoted property name in JSON at position 235 (line 12 column 1)", pointing at the closing brace right after the stray comma. Remove the comma and Format succeeds again. (Firefox and Safari word their messages differently.)
JSON rules that trip people up
These come from RFC 8259, the JSON standard.
- Strings and keys need double quotes.
{'name': 'x'}is valid JavaScript but invalid JSON. - No trailing commas and no comments. Both are common in JavaScript and JSONC config files, and both fail in strict JSON parsers.
- Numbers are plain decimals. Leading zeros (
007),NaN,Infinityand hex values aren't allowed. Very large integers are a portability risk too: the RFC notes that many implementations use IEEE 754 doubles, so whole numbers beyond 2^53 may not survive a round trip. Store long IDs as strings. - Keys should be unique. The RFC says names within an object "SHOULD be unique" but doesn't forbid duplicates, so parsers differ. Browsers keep the last value, which is what Format does, with a note telling you which key was affected.
- Use UTF-8. JSON exchanged between systems must be encoded as UTF-8.
Using the file elsewhere
JSON isn't a program, so there's nothing to run. To check a downloaded file on your own machine, python -m json.tool data.json pretty-prints it or reports the first error, and in Node.js JSON.parse(fs.readFileSync("data.json", "utf8")) loads it. For configuration that people edit by hand, the YAML editor may suit you better, since YAML allows comments.
Last updated