Features
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.
View and edit
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.
Format and beautify
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” or “Smart 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.
Transform, query, sort, and filter
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.
To filter and transform your JSON document, you can use the Transform modal. In the Transform modal, you can write a query to process your data. The tool support two query languages: JMESPath and JavaScript with Lodash. JMESPath allows writing really compact queries, whereas JavaScript and Lodash gives you flexibility and is easy to use since most developers are familiar with JavaScript.
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.
Compare
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.
Repair
So you have a broken JSON document that you need to turn into valid JSON without a hassle? You have a newline delimited JSON data coming from a log file? Or a JavaScript object (without double quotes) from a JavaScript or Python code base that you need to turn into JSON? Or you got query results from your MongoDB containing comments and special data types like NumberLong(2) or ISODate(“2012-12-19T06:01:17.171Z”)?
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.
Validate
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.
Load, save, import, export, and share
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 import CSV and export 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.
Large document support
JSON Editor Online handles large JSON documents with ease. You can open documents up to 512 MB. Searching and querying your JSON data is fast, even with large documents.
Offline support
Did you know you can use this free JSON editor 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…”.