Online JSON editor
JSON Editor is fast and secure online tool to view, edit, format, and validate JSON. Using this any one will be able to analysis any JSON data in Code view can be used as JSON validator and Viewer, Tree View can be used as JSON Formatter, Form View can be used as JSON Viewer and in as a plain text view can be used as JSON pretty printer. In this tool, we are not storing any user input data unless the user wants to do that by Publishing the JSON as a static API response. In that case JSON data will be hosted as public data. It is free JSON hosting service and it will be free for ever!
Most of the available tool use cookie and server-side processing to format, store, process JSON document. In some project, where we deal with sensitive client data, we should not use this type of tools. We as developer used to face a lot of challenges while developing REST API based projects. We have not used any cookie or server-side processing to format the JSON data. Anyone can freely use this tool in any project. Your data will not travel over the network, instead it will process inside the browser on the fly using JavaScript only. You can verify this by using Firefox in built console's network and storage tab. If and only if you want us to store the json data as static REST API then only it will traverse through network and will be stored in our server as static JSON API, which you can use in your front-end development project without any restriction. But please remember the data will be publicly available to anyone who have the unique link.
Can I use Online JSON Editor as a Online JSON Viewer with searching using custom logic?
Obviously Yes. This online JSON editor is developed for this sole purpose. To do a search in JSON viewer mode, simple switch to Tree View and you will find an option to filter and view JSON data using JMESPath, also you can go through a interactive example a tutorial page.
How do I open a JSON file?
To open a JSON File from local Hard drive/ Disk, you can simply Open from disk link, and you will be able to browse to your existing JSON file. Select that and open.
How do I save my JSON object as JSON File?
To save your JSON Object in the editor as a JSON File in local storage you can click on Download. It will ask you for the file name and once you input that will be downloaded in your local machine. Enjoy!!
Features of Code view In JSON Editor:
In the code view mode, any JSON object can be edited in JSON editor as a text editor. The editor can format (Auto Indent), compact (Minify), Repair (Auto fix for tedious errors) and inspect JSON Objects. Please find the bellow pictorial diagram for more information about the controls.
The menu of the code editor contains the following buttons:
- Auto Indentation or Format: Format the JSON data using auto indentation, this makes the data human readable. This is the core feature for user. It helps, Viewing the JSON in a very easy to use format. There are expend – collapse buttons are available besides each JSON object and array. It helps the use to view a specific section in very detail way.
- Minify or Compact: Compact the JSON String by removing all characters like whitespaces and returns.
- Repair / Fix: Repair the JSON string by fixing tedious errors like quotes escape characters. Also, it removes comments JSONP notation and turn JavaScript object into JSON.
Additionally, there are few shortcut keys to format/compact the code:
| Short Keys | Description |
| Ctrl+\ | Format JSON data, set proper indentation |
| Ctrl+Shift+\ | Compact JSON data, remove all whitespace |
Tree View features
In the Tree view, the user will be able to view the JSON data as an editable tree like structure. The editor is loaded with easy to use feature to create, edit, view, duplicate, remove fields, search, transform, change type and to edit the contents of the fields. Please find the pictorial diagram for more information about the controls.
The menu of the tree editor contains the following functions:
- Expand all Children: Expand all fields in the editor.
- Collapse all Children:Collapse all fields in the editor.
- Undo: Undo last action.
- Redo: Redo last action.
- Search/Filter JSON Dynamically: Filter Json Object using JMESPath lib.
- Search:
Search for text in the tree editor. Search results will be highlighted and can be iterated by repeatedly pressing Enter or Shift Enter. The right side of the search box two buttons to go to the next or previous search result.
The field values in the editor are editable input fields. The fields can be dragged up and down using the drag area on the left side of the fields. When a field is the last item of the children of an JSON array or JSON object, the field can also be dragged horizontally to move it in or out of the array or object.
- Type: Change the type of the field. Choose from:
- Auto: The field type is automatically determined from the value and can be a string, number, Boolean, or null.
- Object: An unordered set of key/value pairs.
- Array: An ordered collection of values.
- String: Field type is not determined from the value, but always returned as string.
- Sort: Sort the children of an array or object. For an array, the values of the children will be sorted. In case of an object, the children will be sorted by key. Arrays and objects can be sorted ascending or descending.
- Insert: Insert a new field before current field. Available types are auto (default), object, array, and string.
- Append: Insert a new field after current field. Available types are the same as the insert action.
- Duplicate: Duplicate the field including all children.
- Remove: Remove the field including all children.
Basic Shot cut available in Tree view Json editor
Short Key | Description |
| Alt+Arrows | Move the caret up/down/left/right between fields |
| Shift+Arrow Up/Down | Select multiple fields |
| Shift+Alt+Arrows | Move field up/down/left/right |
| Ctrl+D | Duplicate field |
| Ctrl+Del | Remove field |
| Ctrl+Enter | Open link when on a field containing an url |
| Ctrl+Ins | Insert a new field with type auto |
| Ctrl+Shift+Ins | Append a new field with type auto |
| Ctrl+E | Expand or collapse field |
| Alt+End | Move the caret to the last field |
| Ctrl+F | Find |
| F3, Ctrl+G | Find next |
| Shift+F3, Ctrl+Shift+G | Find previous |
| Alt+Home | Move the caret to the first field |
| Ctrl+M | Show actions menu |
| Ctrl+Z | Undo last action |
| Ctrl+Shift+Z | Redo |