"tred" JSON example ...

At the moment, all this is doing is translating the template context (JSON) into a pretty DOM-tree format. What it needs next is more mouse and key bindings to let you manipulate the document ...

Note that you can't edit keys or indexes or special values like "true", "false" and "null", and that numbers become strings when you edit them. Some more work needed I think!

    {
       "title": "example JSON document",
       "array": [ "this", "is", "an", "array" ],
       "object": { "objects": "look", "like": "this", "and": [ "they", "can", { "nest": [ "deeper", { "and": "deeper" } ] } ] },
       "number": 42,
       "not a number": "42",
       "special stuff": [ true, false, null ]
    }
    

The document is manipulated as a tree of JS objects which mirrors the tree of DOM objects:


    

Note that the template and stylesheet in this document are the only things which make tred specific to JSON. Rather than mapping the AST directly into Javascript objects, we use a more abstract representation because Javascript types aren't exactly the same as JSON types, despite what the name suggests. Other document types can be parsed & serialized ... I'd like to develop it for other languages / markups too.


    

See The github repo and my article "Syntax Tree Editors" for more information.