The following is Jedi, a JSON editor. You can edit numbers, strings and booleans. It is also possible collapse arrays and objects.
Edit something and see the events in the right panel.

{
address
{
number
7
street
Elm
}
age
28
colors
[
0
red
1
blue
2
green
]
friends
[
0
{
married
name
Fulanito
surname
Fulanez
}
1
{
married
name
Menganito
surname
Menganez
}
]
married
name
manolo
}

Code example

var my_json = {
    age: 28,
    name: "manolo",
    married: false,
    colors: ["red", "blue", "green"],
    address: {
        street: "Elm",
        number: 7,
    },
    friends: [
        {
            name: "Fulanito",
            surname: "Fulanez",
            married: true,
        },
        {
            name: "Menganito",
            surname: "Menganez",
            married: false,
        },
    ],
};

var jedi = new Jedi();
jedi.setData(my_json);
jedi.event_change = function(key, value) {
    print_event(key, value);
};

var container = document.getElementById('container');
container.appendChild(jedi.dom);

Events