How to use the JSON Editor
- 1
Paste JSON into the left panel, drop a .json file onto it, or use Open to load from this browser, from disk or from a URL. Documents are saved in your browser as you type and reopen from the link in the address bar.
- 2
Switch each panel between text, tree and table with the buttons in its menu bar. Text is a code editor with folding and search, tree lets you expand, edit, drag and right-click nodes, table shows arrays of objects as a grid.
- 3
Use the menu bar to format, compact, sort, search, undo and redo. Invalid JSON is underlined with the error, and the editor offers to repair quotes, commas and comments automatically.
- 4
Click the arrows between the panels to copy one document into the other, or to transform it with a filter, sort or pick query into the other panel.
- 5
Turn on Compare to highlight every added, removed and changed value in tree and table modes, and step through the differences with the arrows.
- 6
Save as .json, copy formatted or compact, or copy a share link that carries the document inside the URL. Optional AI assist works with your own Gemini key.
Features
- Two independent documents side by side, each with text, tree and table modes
- Copy and transform between panels, with filter, sort and pick queries (JSON Query, JMESPath, JSONPath, Lodash)
- Compare documents with highlighted additions, removals and changes, and jump between differences
- Format, compact, sort keys, search and replace, undo and redo, code folding
- Live validation with automatic repair for comments, single quotes, unquoted keys and trailing commas
- Tree mode with inline editing, drag to reorder, duplicate, extract, insert and a right-click context menu
- Table mode for arrays of objects with sortable, editable columns
- Documents saved in your browser and addressed in the URL, plus open from disk or URL, save and share links
- Full screen, dark mode, and optional AI assist with your own Gemini key
- Opens files up to 100 MB, with text mode staying responsive on large documents
Two documents, three views, one workspace
Most online JSON tools give you a text box and a Format button. This editor gives you two complete documents side by side, and each can be viewed as code, as an expandable tree or as a table. Keep an API response on the left and your edited version on the right. Drop two config files in and compare them. Paste a large array and read it as a spreadsheet.
Everything runs in your browser and your documents are saved locally as you type. The address bar carries the ids of the two open documents, so a reload or a bookmark brings them straight back.
Text, tree and table
Text mode is a full code editor: syntax colouring, folding, bracket matching, search and replace, multiple cursors, and live validation that underlines the first error and offers a one-click repair.
Tree mode shows the structure. Expand and collapse branches, click a value to edit it, drag nodes to reorder them, and right-click for the full menu: insert, duplicate, extract, convert between object and array, sort and transform a subtree. A navigation bar at the top shows the path of the selected node.
Table mode lays an array of objects out as a grid with one row per item and one column per field. It is the fastest way to scan hundreds of records, and every cell is editable.
Copy, transform and compare
The arrows between the panels copy a document from one side to the other, or transform it on the way. Transform opens a query dialog with a live preview: filter items, sort by a field, pick only the fields you need, and write the result into the other panel. JSON Query is the default language and has a point-and-click wizard for arrays; JMESPath, JSONPath, Lodash and plain JavaScript are also available.
Compare highlights every difference between the two documents in tree and table modes. Green marks values that exist only on the right, red marks values that exist only on the left, and amber marks values that changed. Step through them with the arrows.
Common JSON errors and what they mean
- Unexpected token } or ] usually means a trailing comma after the last property or item.
- Unexpected token ’ means single quotes. JSON strings and keys must use double quotes.
- Expected a quoted property name means an unquoted key, such as
{name: "x"}. - Unexpected end of input means the document stops early. A closing
}or]is missing. - Unexpected token / means a comment. Strict JSON has no comments.
In every case the editor points at the position and, for the common mistakes, offers to repair the document automatically.
Frequently asked questions
Is my JSON uploaded to a server?
What do the Copy, Transform and Compare arrows do?
Which query languages does Transform support?
How do share links work without a server?
Where are my documents stored and how do I find them again?
Can it repair broken JSON?
Does it support JSON5 or JSONC?
Can I use it offline?
Last updated .