Free JSON Editor for Windows, MacOS and Linux

Installation

JSONEdit is free to download and runs under python 2 or 3 on Windows, MacOS or Linux. It is part of the tool chest on GitHub. You may clone the source git repository using:

JSONEdit is cross platform and works in the following environments where Python 2 or 3 is installed:

• Windows
• MacOS
• Linux e.g. Ubuntu, Raspbian (for raspberrypi), CentOS

An example installation under Linux might look like the following:

Once installed it can be run over an ssh connection if you have a local X Windows server available such as XQuartz. This is useful in embedded applications such as routers and IOT devices which typically have limited graphical capabilities but usually support ssh connections.

Features

JSONEdit lets you edit and view JSON Documents using an intuitive GUI.

The GUI adds features that text editors do not have by default. The structure of the JSON document is editable and clearly visible for you the user . JSONEdit understands the data types of elements in a document. This allows simple validation to be applied by data type to ensure the JSON that is written remains valid and retains its semantics without the need for a schema.

When saving JSON it is useful for the document to follow a set format so you can compare one revision to another. JSONEdit will pretty print JSON when it writes documents to storage. The keys of dictionaries are sorted alphabetically so they retain their order between revisions. The JSON viewer indents the file to make the structure clearer when viewing the document from outside of JSONEdit - for example with vi, emacs, visual studio code or notepad.

The process of editing is made efficient with a context menu providing commands to alter the structure of the document tree and a text editor that allows multi-line editing. This is useful as JSON does not natively allow a string to span more than a single line in a file - embedded new lines must be escaped. JSONEdit takes care of escaping newline characters for you in the file but on screen the editor will display newlines as you would expect to see them.

As a stand alone program, JSONEdit is entirely local to your device. You can be sure your data is not shared with an online website and you do not require an internet connection to edit JSON. This is useful if data you are editing must be kept secure, or you are working in an offline environment.

How to Use

To start JSONEdit ensure the installation directory is in your path and run:

Once started the editor window will appear. There are three components to the editor window: the menubar, the document tree, and the editor pane. There is a splitter between the tree and pane to adjust the size of the two areas to suit the document you are working on.

The Menubar

The menubar has a simple file menu with the following commands:

• New
  Abandon the current edit and create a new document containing a JSON single object
• Open …
  Show a file dialogue where you select a json file to open and view in the Editor
• Save
  Save the current JSON file
• Save As …
  Save the current JSON to a new file chosen from the file dialogue
• Quit
  Leave the editor application

The title of the application window includes the name of the current file and an asterisk '*' indicating if the current file is dirty and needs to be saved to persist edits to storage.

The Document Tree

The document tree presents you with a hierarchical view of the entire JSON document. You may expand and collapse nodes of the tree to focus on the elements you are interested in. Each collapible node is either a dictionary or a vector. The remaining nodes are plain old data type values that are edited in the editor pane.

If you click on values in the tree they will appear in full in the editor pane to the right. Any edits made to the editor pane update the JSON tree in real time. If for example you are editing a numeric key but enter a string that can not represent a number value you will immediately see in the tree that the value has become 0 rather than the value you have typed.

The Context Menu

Right clicking nodes in the document tree view will call up a context sensitive command menu. It has the following options:

• Add object
  Add an object at the level of the node right clicked. If adding to an existing object you will be prompted to enter a key.
• Rename
  Rename the key right clicked.
• Add array
  Add an array at the level of the node right clicked. If adding to an object you will be prompted to enter a key.
• Move up
  Move the selected node up / earlier within an array
• Move down
  Move the selected node down / later within an array
• Add string
  Add a string to the node right clicked. if adding to an object you will be prompted to enter a key.
• Add boolean
  Add a boolean to the node right clicked. if adding to an object you will be prompted to enter a key.
• Add number
  Add a number to the node right clicked. if adding to an object you will be prompted to enter a key.
• Add null
  Add a null to the node right clicked. if adding to an object you will be prompted to enter a key.
• Delete
  Remove the right clicked node and any contained elements from the document. Useful if you wish to change the type of a node e.g. from null to string.

The Editor Pane

To edit the values held in your document select the value in the document tree view. The Editor pane to the right will then hold the value of the selected document node. You may edit the value in this pane. As the value is typed the document tree will be updated. if the type of the node requires the format of the value to be a certain way, for example a numeric value, you can see if the result is as expected by looking at the live preview in the document tree.

A key feature of the editor pane is support for multi-line editing. Any unescaped \n sequence in the source JSON will become a newline in the editor pane which provides a more natural editing experience rather than having to work with a very long string. This was the original motivation for creating the editor.

Design

JSONEdit has a compact design. The initial goal was to produce an editor allowing editing of embedded strings in a more natural manner than using a vanilla text editors. The issue being that JSON format does not allow string values to span more than one line. This results in multi-line strings being stored in string literals with \n character sequences that obscure the structure of text held in the string value.

A secondary concern was to build an editor quickly with as small a footprint as possible. For this reason Python was chosen for its compact source code form. An additional benefit provided by the use of Python along with the Ttk GUI tool kit was the editor became cross platform with no extra work.

Having chosen Python it was simple to make the project Open Source allowing users to extend the editor themselves or re-purpose it for editing other types of hierarchical data. Bugs could be fixed easily and users are very welcome to contribute new features back to the original git repository

The overall design of the Editor follows the MVVM design pattern. The main file contains three clearly distinct classes to provide the Model, View, and Viewmodel of the MVVM pattern. Consult the source for further information.

Tweet