JSON Editor Online contains two panels, and in each panel you can open a different JSON document. The editors in the left and right panel have three modes: code, tree, and table.
In code mode, the JSON document is rendered as regular text, which is most familiar for developers. In this mode you can see the actual, raw JSON text as is, with white spacing, indentation, and all delimiters like double quotes, commas, and semicolons. You can edit your JSON and format or compact it.
In tree mode, the JSON is rendered in a high level JSON editor, focusing on the data contents rather than every comma and double quote. This mode is useful especially when working with large JSON documents, to easily copy, paste, transform, or extract sections of it. The tree mode also supports highlighting of differences between two JSON documents.
The table mode renders JSON in a grid, similar to a spreadsheet. This gives a lot of oversight when having an array with objects. The data can be sorted by column, and the values can be edited. JSON Editor Online can be configured to flatten nested object properties in separate columns, or to render nested contents inline and open it in a popup.
This page gives an overview of the features that JSON Editor Online offers. You can find more in-depth information in the Documentation.
When working with JSON data, you sometimes have to see what's inside the data, search or analyse it, or make some changes. Data coming from a server is typically compacted (minified), and not easy to read for a developer. JSON Editor Online makes it easy for you to view and edit your data.
One of the most basic and most used features is to format and beautify your JSON. To see what the data of your JSON document looks like, simply paste (or drag & drop) it in the editor, and click the "Format" button. When in tree mode, you don't even have to click a Format button: the document is directly rendered in a human friendly way. When copying the data again, it will be formatted by default. There is also an explicit "Copy" button available in the menu, where you can choose to copy the document in either a formatted or compacted way.
JSON Editor Online is a powerful tool to query and process your JSON document. It can be used to filter, sort, and transform your data.
If you need to sort your array on a specific nested property, open the Sort modal, select the property from the dropdown, and specify whether to sort your data in ascending or descending order. The same modal can be used to sort the keys of an object, and in tree mode, you can sort the document as a whole, or select a nested object or array that you want to sort.
The Transform modal comes with a Wizard, which offers a graphical user interface to construct your query by selecting the properties you want to filter, sort, and pick from dropdowns. The dropdowns are populated by analyzing the data structure of your document.
With JSON Editor Online, you can compare the differences between two documents. Open the documents to be compared in the left and right panel, and enable highlighting of differences by clicking the "Compare" button between the two panels. If not yet done, switch both panels to tree mode to see the differences. The editor uses a fast and advanced algorithm that compares the documents on data level, and not on text level. the algorithm ignores differences in formatting and white-spacing, and also ignores differences in the order of object keys, since they do not change the meaning of the data. The algorithm is able to detect inserted and deleted items in an array, and will properly highlight those.
Just drop your data in JSON Editor Online. In many cases it will automatically repair the data for you, and if not possible, it will point you to the place where the issue is and assist you with repairing it.
When opening a document in JSON Editor Online, it will directly validate whether it is valid JSON. If not, it will warn you, and in many cases offers to automatically repair the document.
Using Ajv, a JSON Schema validator, you can also validate whether the structure of your JSON document is correct, according to the model specified in a JSON schema document. You can load a JSON schema document in various ways: load a schema in your left panel and your document in the right panel, or link to an url for example. Validation issues will be shown inline and in an overview at the bottom of the editor. Clicking in the list with issues at the bottom will scroll to the location of the issue in the document.
You can load and save JSON data in the editor in various ways: copy and paste from the clipboard, drag and drop, load/save from disk, load/save from url, read more about this in the documentation. You can also export your JSON to CSV. You can save your documents in the cloud for free, and share your documents with your colleagues. When saving a document, you can configure whether you want to save it formatted or compacted.
JSON Editor Online handles large JSON documents with ease. You can open documents up to about 500 MB. Searching and querying your JSON data is fast, even with large documents.
Did you know you can use this web application offline? Surprise! After you've loaded the editor once, you can use it even if you have no internet. When using the Chrome browser, you can install it with one click as an app with a shortcut on your desktop. To do so, click the Chrome menu button top right, and click "Install JSON Editor Online…".