json-editor

A tool to view and edit JSON and CSV files, locally and directly from your browser.

Try it: https://dinoosauro.github.io/json-editor/

Usage

Open the website. Then, you'll be prompted to either choose a file/folder, or to create a new one. After that, you'll see in a table the JSON/CSV file. You can edit its value (and change their type), or you can also change the keys by clicking on their name.

After each key, you might see an "Add" (+) and Remove ("-") button.

• The first ("+") permits you to create a child in the object, that can be of any type you want;
• The second ("-") deletes the object entry and all of its children.

If you're viewing an array, you can also find a "Upwards" (↑) and "Downwards" (↓) button.

• The first (↑) permits you to move the array entry up (so, if it was in position i, it will be moved to position i-1);
• The second (↓) permits you to move the array entry down (so, if it was in position i, it will be moved to position i+1).

Export

At the top right of the webpage, you can find two buttons. The one most at the right is the "Export" button. Click it and you'll see some options:

• The first permits you to export the JSON object in a CSV file. This is experimental, but might be useful in some casees;
• The second permits you to keep Uint8Arrays (and Blobs/Files) in the output JSON file. This will create heavy JSON files, so it's suggested to keep this disabled and to use other methods to store binary data;
• The third permits you to save the edits directly in the source file, if possible;
• The fourth permits you to choose what to do when you want to download all the opened files:

• You can include them in a single JSON/CSV file;
• You can download them one by one;
• You can save all of them in a zip file.

Finally, you'll see the two buttons to export only the currently selected item, or all the opened files.

Settings

At the left of the "Export" button, you can find the "Settings" button. Here you can customize:

• What the website should do when you click on a cell. You can either:
  • do nothing;
  • download a file with the content inside that cell;
  • copy the content inside that cell in the clipboard.
• Allow manual table resizing;
• Reset the opened files;
• Switch between light and dark theme.

Privacy

Everything is elaborated locally - your files never leave your device. This website can work offline if installed as a Progressive Web App (and, by the way, you can also open files directy from the File Explorer if you do so).

This has been a sort of readaptation of another project of mine (media-metadata-reader), that uses basically the same stylesheet and JSON viewer logic. If you're interested in reading (but not writing) metadata of audio/video files, have a look at it.