My JSON editor

July 5, 2007

The last couple of weeks I've been searching for a good JSON editor with a tree view. One that allows you to get a good overview of a JSON structure and make changes to it easily.
Yes, I know there's something a bit like that in Firebug (my favourite bug pesticide) and I did actually find a rather promising attempt by Calm_Pear. But I felt neither of these were close enough to home, so I went ahead and wrote my own.

Try it out online or download it (zip file, 26 kB -- including images).

How to use

There is an example html file included in the download and I for one (being the author) think the UI is pretty straight forward, but I'll do some explaining anyway.
You need to include the script and set up two empty divs with id:s -- one that will hold the tree structure and one that will hold the form used for editing. Then you fire the whole thing up onload using the following call:
where JSONobject is a JavaScript object containing the JSON structure and ShowExampleList toggles whether the list with examples is shown or not.
<script src="JSONeditor.js"></script>
<div style="position:absolute;top:10px;left:10px" id="tree"></div>
<div style="position:absolute;top:10px;left:400px" id="jform"></div>

Working with the tree view

All objects and arrays containing children are shown as folders. Pretty standard:

The Label, Value and Data type fields

Save your changes

Delete an item

Rename an item

Add children and siblings

If the option Add children first/siblings before is selected the following applies:

Cut, copy and paste

To copy an item:
  1. Click the item you want to copy in the tree view to select it.
  2. Click Copy.
  3. Click the target (that you want to paste the copy next to) in the tree view.
  4. Click Paste.

Please note:


Everything feels rather stable (knock on wood), but please comment on any bugs you might find and I will try to solve them.

Valid JSON

The editor should create valid JSON with the exception that JavaScript functions can be included. The JSON handling is based on my own stringifier JSONstring.
It will choke if you give it an object with circular references inside. (This might be avoided using JSONeditor.treeBuilder.JSONstring.detectCirculars=true to turn on circular detection, but that is somewhat experimental.)
And, just like when it comes to every JSON stringifier, you should avoid mixing in references to DOM elements in objects you want to edit. That just won't work.

Web browsers

I've tested the editor in IE 7, FireFox 2, Opera 9 and Safari 2 and it worked fine in all of them with the following exception:

Things that I might add in the future

There are some things I've been thinking about adding in the future (but no promises):