JSON editor jQuery plugin

JSON format became quite a standard format for data exchange. Its simple syntax, JavaScript compatibility and human readability are probably the reasons for its wide adoption. I work with JSON on a daily basis and therefore had a need for an online JSON editor. I tried plenty of them that are out there but no one provided a component that I could use in my own applications. The reason why I needed such a component is for UI prototyping. Sometimes you need a replacement for a future UI component that you haven't built yet. Such a component is just part of the UI and allows the user to change some properties that are represented internally as a plain JavaScript object. That's how JSONMate and its core jQuery JSON editor plugin have born. Feel free to comment on it, use it, contribute to it... MIT licensed.

Example first

<link rel="stylesheet" type="text/css" href="jsoneditor.css"/>

<div id="editor" class="json-editor"></div>
<pre id="json"></pre>
<script src="jquery.min.js"></script>
<script src="jquery.jsoneditor.js"></script>
<script>
    var json = {
       "string": "foo",
       "number": 5,
       "array": [1, 2, 3],
       "object": {
         "property": "value",
         "subobj": {
         "arr": ["foo", "ha"],
         "numero": 1
       }
    };
    $('#editor').jsonEditor(json, { change: function() {
        $('#json').html(JSON.stringify(json));
    } });
</script>
                

Usage

jsonEditor(jsonObject, optionsObject) expects a JSON object as the first argument. Whenever the user changes a property of the JSON object through the visual tree viewer/editor, the JSON object gets altered as well and the change() callback of the optionsObject is triggered.

The jsoneditor.css stylesheet is a default styling of the editor. The stylesheet is self-explanatory. .json-editor is the wrapper for the whole component, .item contains a .property and .value input fields which correspond to a property and value of the JSON object. .item contains other items in case of a nested object. .editing is a class items gain when their respective input boxes gain focus. .expander is a span element representing the button for expanding nested objects. Feel free to adapt the styling for your needs.

Browser support

The JSON editor should be compatible with all browsers jQuery supports. However, it's been tested only in IE7+, FF3+, Chrome and Safari. Please note that the json2 polyfill has to be included for browsers that do not support the JSON object natively.