JSON editor jQuery plugin

Did you have a need for a simple JSON editor component that allows you to edit a JSON object and directly reflect the changes? You found it. Feel free to use and contribute. It's licensed under the MIT license.

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

As you can see from the above example, usage is pretty simple. Look at the life example demonstrating the component. Code can be found on github.

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 property and value of a JSON object. .item contains other items in case of a nested object. .editing is a class items gain when their respective input boxes are focused. .expander is a span element representing the button for expanding nested objects. Feel free to adapt the styling for your needs.

The options object appearing as the last argument to the jsonEditor method contains only one property that can be set at this time, which is the change callback. The change callback is called whenever the JSON object passed as the first argument is changed.

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.

A pure JavaScript color picker

Yes... you see it right, yet another color picker out there! But what makes this one special over the others?

Let me start to explain the usual way web based color pickers are built. 95% of them use one or more images to show the color palette, the rest is built with flash. That seems to be logical, right?

But is this image/flash/CSS downloading overhead really necessary? And what if you want to change the dimensions of the color picker?

I asked myself these two questions when building a web based diagramming editor on top of my JointJS library. I tried plenty of color pickers but no one suited my needs. So I decided to build a new one. The result is 4.3KB of minified JavaScript without any dependency on an external library. It's a standalone piece of code which you can just append to your other JavaScript reducing unnecessary server requests. It works in all major browsers (IE7+, FF3.5+, Chrome 4+, Safari 4+, Opera 9+, might also work in IE6 but I didn't want to get my hands dirty, so I haven't tried). The dimensions and position of the picker and slide area can be fully customized in CSS just like any other div element.

And what is the magic behind? Sorry, no magic, just normal (usually forgotten) SVG/VML. The size of vector objects created are set to 100% width/height so they are adjusted according to the outer divs. Registered callback is invoked whenever the color changes and it is passed a color in hexadecimal, hsv and rgb formats. That's it.

Try it yourself: Flexi Color Picker.