A new version is available here as of april 2008!!

‘Quick’ and dirty JSON Editor

Back to the weblog entry (comments can be placed there)

• Usage
• Building json from scratch
• News

Usage:
Choose a sample from the dropdown box to load a JSON sample into the textarea, next; click the “build tree” button to create a collapsible tree. Expand the tree by clicking the plus images and click a node to load its value in the textarea. You can save the (changed) value back to the JSON string by clicking the “save” button.

You can also paste your own JSON string into the textarea and click “build tree”.

When finished editing click the upper node called “json” to load the edited JSON string back into the textarea.

There are some more samples to try here.


Building json from scratch:
To create a json object from scratch you simply enter the following into the textarea:

{}

And click "build tree". Click your empty object. You can expand the node but it should only show a line (The object is empty). Now that you have selected the empty object you can start adding objects or arrays, paste the following into the textarea (Make sure you selected the json node in the tree!):

{"test":[{"text":"text here"},{"number":123}]}

Click the save button, because you just added an object holding two array elements you will be asked to reload the tree, click "ok". Now you can change objects and arrays to build up your json object! Every time you save an object or an array you will be asked if you want to reload the tree.


News:
May 18th
Objects and arrays can now be saved to the json object. When using Firefox you are able to edit functions as well although this is still experimental.

May 15th
Have tested this page successfully on the following browsers: FireFox 2, Internet Explorer 6 & 7, Opera 9 and Safari 2.0.4. (All on WinXP and Windows2003 except Safari which was tested on a Mac... duh!)