"WASTE" 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 indexes and editing special values like "true", "false" and "null" and numbers is a bit fraught. 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 WASTE 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.