JSON Editor Online - Documentation

Introduction

JSON Editor Online is a web-based tool to view, edit, and format JSON. It shows your data side by side in a clear, editable treeview and in a code editor.

Supported browsers: Chrome, Firefox, Safari, Opera, Internet Explorer 8+.

Website: https://jsoneditoronline.org.

Contents:

The applications main menu contains options to clear, load and save the JSON contents of the application. Files can be loaded from disk (via menu or drag and drop), url, or online, and can be saved online or to disk. Please note that due to security restrictions, the application can only open urls from public websites, not from an intranet. The data policy is described here.

Main menu

Loading and saving documents in the cloud

Documents can be saved online by clicking menu Save, save online. Online saved documents can be loaded (and shared with others) via their url. This url looks like:

To open a saved document, go to menu Open. This menu contains a list with all saved documents. Documents can be deleted here too by clicking the cross right of the document name. Note that the list with documents is stored in the browsers local storage. When reinstalling your browser or clearing all browser data, this list will be gone.

Online saved documents have a name, which is displayed in the top left of the application. The name can be changed by clicking it, this will open a dialog where a new name can be entered.

Main menu

Load a document via url

Fia menu Open, Open url, one can open an arbitrary url into JSON Editor Online. Note that it's not possible to save changes to this url, and that the JSON document must be publicly available (CORS must be enabled for http://jsoneditoronline.org, and no credentials or tokens must be required).

Settings

Settings menu

In the settings, one can specify an indentation and JSON schema validation.

Panels

The application contains two panels: a code editor on the left, and a Tree Editor on the right.

There is a splitter between the two panels, allowing to change the width of both panels according to ones needs. To copy the contents from one panel to an other, the two copy buttons between the panels can be used.

Code editor

The code editor displays JSON data in a code editor. The editor is capable of formatting, compacting, and inspecting JSON.

The menu of the code editor contains the following buttons:

Tree editor

The Tree editor displays the JSON data in an editable tree. The editor makes it easy to create, duplicate, remove fields, and to edit the contents of the fields.

The menu of the tree editor contains the following functions:

The field values in the editor are editable input fields. The fields can be dragged up and down using the dragarea on the left side of the fields. When a field is the last item of the childs of an array or object, the field can also be dragged horizontally to move it in or out of the array or object.

Right from the dragarea is a button to open the actions menu. Depending on the type of field, the following functionality is available in the actions menu:

Query parameters

To automatically load a JSON document when opening the JSON Editor, the query parameters id, url, and json can be used:

Shortcut keys

The tree editor supports shortcut keys for all available actions. The editor can be used by just a keyboard. The following short cut keys are available:

Global

KeyDescription
Ctrl+SSave the current document online.
Ctrl+>Copy code from the left panel to the right panel, and move the focus to the right panel.
Ctrl+<Copy code from the the right panel to left panel, and move the focus to the left panel.

Tree editor

KeyDescription
Alt+ArrowsMove the caret up/down/left/right between fields
Shift+Arrow Up/DownSelect multiple fields
Shift+Alt+ArrowsMove field up/down/left/right
Ctrl+DDuplicate field
Ctrl+DelRemove field
Ctrl+EnterOpen link when on a field containing an url
Ctrl+InsInsert a new field with type auto
Ctrl+Shift+InsAppend a new field with type auto
Ctrl+EExpand or collapse field
Alt+EndMove the caret to the last field
Ctrl+FFind
F3, Ctrl+G
Find next
Shift+F3, Ctrl+Shift+GFind previous
Alt+HomeMove the caret to the first field
Ctrl+MShow actions menu
Ctrl+ZUndo last action
Ctrl+Shift+ZRedo

Code editor

The code editor is powered by Ace Editor. This editor's shortcut keys are described here:

https://github.com/ajaxorg/ace/wiki/Default-Keyboard-Shortcuts

Additionally, there are shortcut keys to format/compact the code:

KeyDescription
Ctrl+\Format JSON data, set proper indentation
Ctrl+Shift+\Compact JSON data, remove all whitespace