About the JSON Editor
A full code editor for JSON, with syntax highlighting, bracket matching, folding and live error checking. Import a file, edit it, and download the result.
Key features
- Full code editor with syntax highlighting
- Live validation as you type
- Code folding, bracket matching and line numbers
- Format, minify and sort keys from the toolbar
- Open a local .json file and download your edits
- Light and dark editor themes
A proper code editor for JSON
The XUtilHub JSON Editor is built on CodeMirror 6, the same editor engine used in many browser-based IDEs. You get syntax highlighting, line numbers, code folding, bracket matching and instant validation, with no install and no sign-up.
It's ideal for quick edits: tweaking a config value, fixing a test fixture, cleaning up a sample payload before putting it in documentation, or preparing a request body for an API.
Toolbar actions
| Button | What it does |
|---|---|
| Format | Re-indents the document with 2 spaces |
| Minify | Removes all whitespace to make it compact |
| Sort keys | Sorts every object's keys A→Z, recursively |
| Upload | Opens a .json file from your computer |
| Copy | Copies the whole document |
| Download | Saves the document using the original file name |
The status line under the editor turns green when the document is valid, or shows the parser error, so you always know whether your edit broke anything.
Editing tips
- Fold large sections. Click the arrow in the gutter to collapse objects and arrays you're not working on.
- Use search and replace. Press Ctrl/Cmd+F to find text, then switch to replace mode to change every occurrence of a value.
- Format before committing. Consistent formatting keeps Git diffs small and readable.
- Sort keys for review. Sorted keys make two versions of a config much easier to compare.
Common editing mistakes
- Forgetting a comma when adding a new property at the end of an object. Every property except the last needs a trailing comma.
- Leaving a trailing comma after deleting the last property.
- Using single quotes out of habit from JavaScript or Python.
- Pasting smart quotes from Word, Slack or Google Docs.
When something goes wrong, the error under the editor points to the line and column. For larger repairs, the JSON Fixer can fix most problems in one click.
Related tools
To check differences between your edited version and the original, use JSON Compare. To generate realistic test data to edit, try the JSON Generator.
How to use the JSON Editor
- Paste your data into the input box, upload a file, or click Sample to try it out.
- Adjust the options above the editor if you need to (indentation, delimiter, and so on).
- The result appears instantly in the output panel. Any errors are shown with their line and column.
- Click Copy to copy the result, or Download to save it as a file.