User Guide

For JSON Editor 2025.11.19

1. Installing

Chrome (and Chromium-based browsers)

Open JSON Editor on the Chrome Web Store and click Add to Chrome.
Confirm with Add extension.
Click the puzzle-piece Extensions button next to the address bar and pin JSON Editor so its icon is always in the toolbar.

Microsoft Edge, NAVER Whale and other Chromium-based browsers can usually install from the Chrome Web Store too. Some ask you to turn on a setting such as “Allow extensions from other stores” first.

Firefox

Open JSON Editor on Firefox Add-ons and click Add to Firefox.
Confirm with Add.
In the puzzle-piece Extensions menu, open JSON Editor’s gear menu and choose Pin to Toolbar.

Firefox 109 or later is required. In both browsers the store installs updates automatically.

2. Opening the editor

Click the JSON Editor icon in the toolbar and the editor opens in a new tab in the current window. It’s a full tab rather than a popup, so you get the whole screen, and you can keep several open at once.

The editor remembers the last document you worked on and shows it again next time. To start fresh, click New in the menu at the top.

3. Code view and tree view

The screen is split in two.

Code view (left): a code editor (Ace) for the raw JSON, with syntax highlighting, line numbers, bracket matching and indent guides. Paste or type here.
Tree view (right): expand and collapse objects and arrays to explore the structure. The number next to an object or array is how many items it holds.

The two sides don’t sync automatically — use the arrow buttons in the middle:

▶ (right arrow): copies the code view into the tree view.
◀ (left arrow): copies your tree edits back into the code view.

Drag the divider to resize the two sides; the position is remembered.

4. Format, compact and find errors

Use the two buttons above the code view:

Format JSON: breaks the JSON into lines with your indentation setting (2 spaces by default).
Compact JSON: strips all whitespace and line breaks into a single line — handy for request bodies and config values.

If the JSON is invalid, formatting it or sending it to the tree shows an error message at the top that says which line and what was expected. While you type, errors are also flagged in the margin of the code view. The usual suspects are a trailing comma after the last item, single quotes, and unquoted keys.

5. Editing in the tree

Click a key or value to edit it in place.
The menu button on the left of each row lets you insert, append, duplicate or remove items, change a value’s type (auto, array, object, string) and sort.
Drag the handle on the left of a row to move an item. You can also select several items and move or remove them together.
The toolbar above the tree has expand all, collapse all, undo, redo and search. Search looks in both keys and values; use the up/down buttons to step through the results.
If a value is a web address, Ctrl-click it to open it in a new window.

When you need the raw text of your tree edits, send them to the code view with ◀.

6. JSON Schema validation

You can check whether a document follows a JSON Schema.

Open Settings in the top menu.
Under JSON schema validation, click Add schema and enter the web address (URL) of the schema file.
Select the schema. The editor loads it, validates your document, and marks anything that doesn’t match in both views.

Your browser downloads the schema directly from the address you enter. In Chrome, you’ll be asked for permission the first time you use a site (see Opening files). The list of schemas you add is stored only in this browser.

7. Opening and saving files

Opening

Open › Open from disk: pick a JSON file on your computer. It is read only inside this browser.
Drag and drop: drop a file onto the editor to open it.
Open › Open url: load JSON from a web address. Chrome asks once whether the extension may access that site; if you allow it, your browser fetches the file straight from that server. If you decline, nothing is loaded.

In Firefox: the current Firefox version doesn’t request extra site permissions, so Open url and loading a schema by URL may not work. Download the file in your browser and open it with Open from disk instead.

Saving

Save › Save to disk: downloads the current document as a .json file named after the document (or a default name). If you last edited in the tree, the tree’s content is saved; if in the code view, the code is saved.

Don’t use Save online. This menu (and Ctrl+S) is left over from the original project. We run no server for it, so your document isn’t saved and you’ll see an error. It will be removed in the next update. Always use Save to disk to keep your work.

8. Keyboard shortcuts

Use Ctrl, not ⌘, on macOS too.

Shortcut	Action
`Ctrl`+`.`	Copy the code view into the tree view
`Ctrl`+`,`	Copy the tree view into the code view
`Ctrl`+`D`	(Tree) Duplicate the selected items
`Ctrl`+`Ins`	(Tree) Insert a new item before the selection
`Ctrl`+`Shift`+`Ins`	(Tree) Append a new item after the selection
`Ctrl`+`Del`	(Tree) Remove the selected items
`Ctrl`+`Z` / `Ctrl`+`Shift`+`Z`	Undo / Redo

9. Indentation and dark mode

Settings › Indentation sets how many spaces formatting uses (2 by default).
The moon (☾) button in the top-right corner switches to dark mode; the sun (☼) button switches back. Your choice is remembered regardless of your computer’s appearance setting.

10. Uninstalling

Chrome: right-click the JSON Editor icon › Remove from Chrome, or click Remove in chrome://extensions.
Firefox: right-click the icon › Remove Extension, or click Remove in about:addons.

Uninstalling also deletes the document and settings stored in your browser, so download anything you need with Save to disk first.