thomasfrank.se

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:

JSONeditor.start (treeDivName,formDivName,JSONobject,ShowExampleList)

where JSONobject is a JavaScript object containing the JSON structure and ShowExampleList toggles whether the list with examples is shown or not.

<html>
<head>
<script src="JSONeditor.js"></script>
<script>
onload=function(){
	JSONeditor.start('tree','jform',{},true)
}
</script>
</head>
<body>
<div style="position:absolute;top:10px;left:10px" id="tree"></div>
<div style="position:absolute;top:10px;left:400px" id="jform"></div>
</body>
</html>

Working with the tree view

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

Click a plus sign to open a folder, click a minus sign to close a folder. Click an item to select it and load its content into the editor.

The Label, Value and Data type fields

The Label field contains the full JSON path to the selected item. You may change this path/label as you wish before saving.
The Value field contains the value represented as JSON. The only exception to this is when you're editing a string -- for convenience it is written out as plain text, rather than a JSON representation of text.
The Data type field shows you the data type of the edited item and you may change it, although type conversion is rather basic.

Save your changes

Click Save to save all changes you've made to label, value or data type.

Delete an item

Click Delete to delete the currently selected item.

Rename an item

Click Rename to rename the currently selected item. You will be asked to enter a new name. (This is just an alternative to changing the name in the Label field.)

Add children and siblings

Click Add child to add a child to a selected object or array.
Click Add sibling to add a sibling to the currently selected item.

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

A new child will be added before all other children.
A sibling will be added before (instead of after) the currently selected item.

Cut, copy and paste

To copy an item:

Click the item you want to copy in the tree view to select it.
Click Copy.
Click the target (that you want to paste the copy next to) in the tree view.
Click Paste.

Please note:

Cut works in a similar way to Copy but removes the original object.
If the option Paste as child on objects & arrays is selected pasted data will be placed as a child (instead of a sibling) when the target is an object or an array.
The option Add children first/siblings before also affects the placement.

Compatibility

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:

Stringification of functions is sometimes impossible in Safari due to a browser bug. This seems to happen when the functions contain strings with escaped line breaks (such as \n and \r) and under a few other conditions as well.

Things that I might add in the future

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

Moving items using drag and drop in the tree view.
User friendly forms -- automatically building input forms from the children (and perhaps even grandchildren) of an object.
Keyboard navigation -- moving up and down and expading/collapsing the tree view using cursor keys. Maybe some keyboard shortcuts for the buttons as well.

[comments]