JSON Editor Online Documentation


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:

  • Load a document in the left panel. Then, filter and sort its contents into the right panel without changing the original document.
  • Load a JSON document in the left panel, and load a JSON Schema document in the right panel and use this to validate the document in the left panel.
  • Compare two documents, highlight the differences.

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 the mode for the editor:

  • Tree mode (left picture below) is a high level JSON editor focusing on the actual contents of the document (rather than each comma and quote).
  • Text mode (right picture below) is a regular plain text editor with color highlighting, showing the raw text as-is. It is powered by CodeMirror.

Tree mode         Text mode

To switch between the two modes, use the mode toggle on the left in the menu:

Switch mode

Text mode

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.

Edit a document in Text mode

Tree mode

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.

Edit a value in tree mode

Context Menu

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 by clicking the small back arrow down button on the right side of the selecting, by right-clicking on the selected contents, by pressing the Windows context menu button on your keyboard, or by clicking the Context menu button in the main menu (the three vertical dots).

The Context Menu contains the following features to edit the selected contents. Most of these features do have keyboard shortcuts.

  • Edit (press Enter to start editing a selected key/value, press Enter again to finish, or Escape to cancel)
  • Cut (Ctrl+X), copy (Ctrl+C), and paste (Ctrl+V)
  • Remove (Delete)
  • Duplicate (Ctrl+D)
  • Extract
  • Sort
  • Transform
  • Replace or insert new contents (just start typing to replace or insert)

Context menu with selected contents

Context menu inserting new content



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:

Format and compact buttons in text mode

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.

Copy formatted or compact


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

Sort data


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.

Transform data

JSON editor supports two query languages:

  • JavaScript with Lodash. Example query:

    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
  • JMESPath. Example query:

    [*] | 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.

Switch query language


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.

Compare documents


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 .

Repair a document


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/ .

Validate a document using JSON Schema


JSON Editor Online has a couple of ways you can load, save and share documents, described here.

Note that JSON Editor Online does not have a login or account. Recent documents are stored in your browsers local storage. When clearing your browser cache, this list will be gone.

Local Storage

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.

Cloud storage

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.

Export to CSV

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 object properties. Flattening nested objects is useful since Spreadsheet applications can only handle a flat table with data and cannot handle nested data.

The CSV data can be copied to your system clipboard or saved to a file on disk.

Export JSON to CSV


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:


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:


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.

Configuration options

The dropdown menu with configuration options contains:

  • Selecting a JSON Schema to validate your JSON document.
  • Configure indentation used when formatting the document. Note that after changing the configured indentation, you'll have to click the "Format" button for example to apply the new indentation to a document.
  • Configure whether to escape control characters like return \n and tab \t. This is only applicable for Tree mode, in Text mode control characters are always escaped.
  • Configure whether to escape unicode characters like smileys 😀.
  • Open a model with generic document properties (name, size, last updated time, where it is persisted).
  • Delete the document.

Configuration options