JSON Editors

Editing JSON in JSON Formatter

JSON Formatter from https://jsonformatter.org/ provides quite good JSON editing functionality. You can type your JSON in the edit box on the left and it will be formatted with proper indentation and line feeds. You can also click on the “Compact” icon in the edit box menu bar to transform your JSON to compact/minified format.

This JSON editor also provides a quite useful feature of collapsing parts of JSON while still being in editing mode. This could be quite helpful when working on a complex JSON file with multiple nesting levels. To collapse part of JSON click an arrow next to the line number. To expand collapsed JSON click on the same arrow next to the line number or click on the “expand” icon which will be displayed instead of the collapsed text.

Besides editing JSON formatter also provides multiple additional features. You can click on the “JSON Graph” icon in the edit box toolbar to display JSON in a graph format where you can zoom and expand/collapse nodes. You can also click on the “filter” icon to type and execute a query in JMESPath format on JSON you are editing. You can sort your JSON by clicking on the “Sort” button.

Ace Editor

Most of JSON Editors available online are based on the code editor component ACE Editor which is an embeddable code editor written in Javascript. Its performance and features match such native editors as Sublime, Vim and TextMate. Some advanced features like code collapsing, advanced highlighting and customization make it even more powerful. If you want to have your own JSON editor just use ACE to embed it into your website.

ACE code editor could be downloaded from the https://ace.c9.io/. You can also use an already preconfigured editor on its home page which besides all things allows to edit JSON too.