JSON Editor Online is a web-based tool to view, edit, format, repair, compare, query, transform, validate, and share your JSON data. This documentation page describes how to use the editor.
JSON Editor online contains of two panels, each showing a JSON document. These documents can be edited independently of each other. In between the two panels, there is a section with buttons to copy or transform contents from the left to the right side or vice versa, and to compare the differences between the two sides. Typical use cases for the two panels are:
The width of both panels can be changed by dragging the splitter (the area with the vertical ellipsis icon) in between the two panels. When dragging the splitter fully to the left or the right, one of the panels will be displayed full screen and the other panel will be hidden.
In both panels, you can select a mode using the mode toggle on the left side in the menu:
There are three modes available:
In Text mode, navigation works just like in any plain text or code editor. You can type to change the contents, use mouse and keyboard arrows to navigate the cursor and select text, copy and paste text, etc.
In Tree mode, navigation may some getting used to. This works more similar to a spreadsheet with cells, where in the case of the JSON document, the "cells" are JSON keys and values. You can use the arrow keys to move the cursor around or click somewhere to select the clicked field. To select multiple items, drag over them with the mouse, or use the keys Shift+Arrow Up/Down. To select the area between two items to insert a new item, click on the empty area right from an item, or select the item and then press Arrow-right to move the selection in between the current and next item.
The selected contents can be cut, copied, and pasted inside the editor itself or to the other panel or another application. The selected contents can also be dragged up or down with the mouse inside the current array or object.
To edit a key or value, you can press Enter
to open the field in edit mode, or double-click it with the mouse. When just starting to type, edit mode will be opened too and the old contents of the selected field are cleared.
Most operations are available via the context menu, which can be opened by right-clicking on the selected contents. Read more in the Context Menu section.
The Table mode is a useful mode to edit a structured array with JSON objects. It works similar to a spreadsheet. Items in the json table can be edited by double-clicking them or pressing Enter when an item is selected. The arrow keys can be used to navigate through the table, and quick-keys Ctrl+X
, Ctrl+C
, Ctrl+V
can be used to cut, copy, and paste an item respectively. Nested contents can be flattened or displayed as a nested object, this can be changed in the configuration modal. When double-clicking a nested object, a popup will open where the contents can be viewed and edited. Clicking one of the column headers will sort the contents on that property.
In Tree mode, the Context Menu is available to apply operations on the selected contents in your JSON document. The Context menu can be opened in various ways:
The Context Menu contains the following features to edit the selected contents. Most of these features do have keyboard shortcuts.
Enter
to start editing a selected key/value, press Enter
again to finish, or Escape
to cancel)Ctrl+X
), copy (Ctrl+C
), and paste (Ctrl+V
)Delete
)Ctrl+D
)One basic but important feature of the editor is formatting or compacting of a JSON document. Formatting can be done in various ways. In Text mode, there are two buttons Format and Compact:
In Tree mode, formatting can be applied when copying to clipboard or when saving the document to disk.
When saving to disk, the document is always formatted.
When copying the selected contents, it is possible to select "Copy compact" in the Context Menu, or use a shortcut key for this: Ctrl+C
copies formatted, Ctrl+Shift+C
copies compacted. Similarly, the selected contents can be cut either in formatted or compact form, with shortcut keys Ctrl+X
and Ctrl+Shift+X
.
To sort the contents of an array or object, open the Sort modal. In case of an array containing objects, you can select which nested field you want to use to sort the items. Note that the Transform modal also allows doing sorting, but in combination with filtering and transformation of the contents.
The Sort button in the main menu will sort the whole document. In Tree mode, it is possible to sort the contents of a nested object or array by selecting it, and using the Sort button from the Context Menu
The Transform modal is a powerful tool to query and manipulate your JSON document. It can be used to filter, sort, and transform your data. The Transform model can be opened via the main menu and context menu.
When the JSON document is an array, a Wizard is available to make it easier to select fields to apply filtering or sorting, and pick the fields that you need from the data. If the wizard doesn't have enough options to describe the query that you need, you can adjust the query to your liking in the Query field.
JSON editor supports two query languages:
function query(data) {
data = _.orderBy(data, [['address', 'city']], ['asc'])
data = _.map(data, (item) => ({
name: _.get(item, ['name']),
username: _.get(item, ['username']),
city: _.get(item, ['address', 'city'])
}))
return data
}
[*] | sort_by(@, &address.city) | [*].{name: name, username: username, city: address.city}
The query language can be selected via the top right "Options" button of the Transform modal.
JSON Editor can compare the two documents in the left and right panel. To enable comparison, click the "Enable" button between the two panels, under the section "Differences". The diffing algorithm can smartly compare arrays and will detect additions and deletions in array items. In objects, the algorithm does compare the properties content wise, without looking at the order of the properties. The number of differences will be displayed, and with the navigation buttons you can inspect the differences one by one.
Highlighting of differences is only supported in Tree mode, not in text mode.
JSON Editor online can automatically repair many small issues in JSON documents, like missing or trailing commas, replacing missing or singe quotes, stripping comments, and replacing JSONP, MongoDB, or newline delimited JSON.
When loading a document in Tree mode, JSON will automatically be repaired when possible, and you will be informed about that and can decide otherwise. In Text mode, an error message will be displayed at the bottom with an "Auto Repair" button. Clicking on the error message will scroll to the location of the error.
The repair features are described in detail at https://github.com/josdejong/jsonrepair .
JSON Schema documents can be used to validate the structure of a JSON document. A JSON schema document can be specified via the menu "Options", "JSON Schema". One can paste the JSON Schema there, refer to an online document, or to the other panel in the editor.
The JSON Editor can not enforce a JSON schema, it will only display warnings when a document doesn't adhere to the schema. The user will have to fix the issues by himself. JSON Schema warnings will be displayed both inline and at the bottom of the editor. Clicking on a warning at the bottom will scroll to the location of the issue.
JSON Editor uses ajv to compile and run JSON documents against a JSON Schema. For more information on JSON Schema in general, see: https://json-schema.org/ .
JSON Editor Online has a couple of ways you can load, save and share documents, via the dropdown menu's "Open" and "Save".
By default, when working on a document in the editor, it will be automatically persisted in your browsers local storage in order not to lose data. The size of these documents is limited to 1 MB.
Note that JSON Editor Online does not have a login or account. Recent documents are stored in your browser's local storage. When clearing your browser cache, this list will be gone.
JSON Editor Online comes with free cloud storage for your documents. The cloud documents have a limit of 1 MB.
WARNING: Documents stored in the cloud can be viewed and edited by anyone who knows the document's id.
To store a document in the cloud, select "Save", "Save to cloud" from the main menu. The document can be deleted via "Options", "Delete document", or in the list with recent files "Open", "Open a recent file".
When a document is stored in the cloud (and not in your browsers local storage), a Cloud icon is displayed left from the document name. Cloud documents can be shared with others via the "Share" button.
You can load and save files from disk via the menu "Open", "Open from disk and "Save", "Save to disk". You can also drag and drop files from your computer onto the left or right panel of the JSONEditor to load them. You can open both JSON and CSV files.
CSV documents (comma separated values) can be opened via the menu "Open", "Import CSV". CSV is a common data format used for example in spreadsheet applications. When importing a CSV, it is necessary to specify whether the file contains a header or not, and what delimiter is used.
When field names contain a dot, like "address.city" and "address.street", it can be parsed into a nested JSON object by selecting "Nested objects". So this can for example result in a nested JSON object {"address": {"city": "Rotterdam", "street": "Coolsingel"}}
instead of a flat JSON object {"address.city": "Rotterdam", "address.street": "Coolsingel"}}
.
You can read more about CSV in the article "Convert JSON to CSV using JSON Editor Online".
A JSON document can be exported to CSV via the menu "Save", "Export to CSV". A typical use case is to load and preprocess your JSON data in JSON Editor Online: filter and sort the data, remove redundant fields. Then, the data can be exported to CSV and loaded into a spreadsheet application to do further analysis, like plotting graphs or importing the data in another application.
Exporting to CSV will open a modal where a preview of the CSV file is displayed. You can select whether to include a header row, and you can configure whether to flatten nested objects or arrays. Flattening nested objects is useful since Spreadsheet applications can only handle a flat table with data and cannot handle nested data. Be careful with flattening nested arrays: this can result in a large amount of columns when one of the arrays contains a lot of values.
The CSV data can be copied to your system clipboard or saved to a file on disk.
You can read more about CSV in the article "Convert JSON to CSV using JSON Editor Online".
Documents can be loaded via a URL. This URL must be public and not require authentication. It must also be a secure url (https) and allow CORS (Cross-Origin Resource Sharing) in order to work. If the url is unsecure (http) or has no CORS support, you can select "Use proxy" to open it via a proxy. The proxy requires the url to be available publicly on the internet, it does not support urls inside a local network.
Saving to a URL is possible too. In that case a POST request to the specified URL is done, with the JSON document as request body. The URL must not require authentication and must have CORS enabled.
To open a URL programmatically, the query parameters left
and/or right
can be used:
https://jsoneditoronline.org/#left=url.ENCODED_URL_HERE&right=url.ENCODED_URL_HERE
It is important that the URL's are encoded (you're showing urls inside and url). This can be done for example with the JavaScript function encodeURIComponent
.
Both left
and right
can be specified, or only one of the two.
To load JSON contents itself via the url, use:
https://jsoneditoronline.org/#left=json.ENCODED_JSON_CONTENTS&right=json.ENCODED_JSON_CONTENTS
For example, to load [1,2,3]
in the left panel, and {"a":1,"b":2}
in the right panel:
The Share button allows you to copy the url of the JSONEditor application including the cloud id of the document you want to share. This requires the document to be stored publicly in the cloud. Anyone with this URL can open and edit the shared document.
The dropdown menu with configuration options contains:
Clicking "Configure editor" in the "Options" menu will open the Configuration modal. In the configuration modal you can configure the following options:
\n
and tab \t
. This is only applicable for Tree mode, in Text mode control characters are always escaped.JSON parser options:
18800000000000000123
.18800000000000000123
and maintains the formatting of numbers like 4.0
. The parser is slower than the Native JSON parser, which is noticeable for documents larger than 10 MB.Note that switching to a different parser will only be applied after reloading the currently opened documents.
In the Developer Console of your browser you can get access to the left and right JSON Editor instance, and you can use various JSON utility libraries like jsonrepair
and lodash
. The options are explained in detail when you open the Developer Console, via F12
or Ctrl+Shift+I
(Cmd+Shift+I
) or via "Application Menu" > "More Tools" > "Developer Tools".