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.

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

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

Native Installation

The tool requires the following system packages:

• python3 - Python 3 interpreter
• python3-tk - Tk GUI toolkit
• python3-venv - Python virtual environment
• git - Git version control

Clone the repository and install the application dependencies:

git clone https://github.com/adamlatchem/toolchest.git
cd toolchest
pip3 install -r pipDependencies
python3 json-edit.py

Container Installation

JSONEdit can be run in a container, for example using Podman. This requires access to your X11 socket for GUI display.

Create the following Containerfile.json-editor:

FROM ubuntu:24.04

RUN apt-get update && \
    apt-get install -y git python3 python3-tk python3-pip python3-venv xauth && \
    rm -rf /var/lib/apt/lists/*

WORKDIR /App

RUN git clone https://github.com/adamlatchem/toolchest.git /App/toolchest

RUN python3 -m venv /opt/venv

ENV PATH="/opt/venv/bin:$PATH"

RUN pip3 install -r /App/toolchest/pipDependencies

WORKDIR /App/toolchest

ENTRYPOINT ["python3", "json-edit.py"]

Build the Container

podman build --file Containerfile.json-editor --tag jsonedit .

Configure X11 Access

Before running the container, you must grant Podman access to your X11 socket.

Option 1: Simple Access (Less Secure) Allow local containers to access the X server:

xhost +local:podman

Option 2: X11 Authentication Cookie (More Secure) Create a container with access to your X11 authentication cookie:

XSOCK=/tmp/x11-unix
XAUTH=/tmp/xauth.$$
touch $XAUTH
xauth nolist $XAUTH || xauth source - <<< "$(xauth list | grep -v '^!')"
podman run --rm -it \
  --network host \
  --volume $XSOCK:/tmp/.X11-unix:rw \
  --volume $XAUTH:/tmp/.Xauthority \
  --env DISPLAY \
  --env XAUTHORITY=/tmp/.Xauthority \
  jsonedit:latest

Run the Container

Basic run command:

podman run --rm -it \
  --network host \
  --volume /tmp/.X11-unix:/tmp/.X11-unix:rw \
  --env DISPLAY \
  jsonedit:latest

Edit Local JSON Files

To edit local JSON files, mount the directory containing your files:

podman run --rm -it \
  --network host \
  --volume /tmp/.X11-unix:/tmp/.X11-unix:rw \
  --volume $(pwd):/data \
  --env DISPLAY \
  --workdir /data \
  jsonedit:latest

This mounts the current directory to /data in the container and sets it as the working directory so you can open local JSON files.

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:

json-edit.py <optional-json-file-to-open>

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