Graphical representation of the model and the view (with a live updates)

[Reinmar]

The goal is to render the contents of the engine model structure in a nice, graphical way (like browsers' dev tools). As an additional feature we can also render the engine view structure.

Such a feature will be useful for debugging the engine and features working on it as well as showcasing how the data look like compared to the view (so for debugging the model to view converters).

Possible features:

• Re-rendering only the part of the model or view which has changed (with some blink or other animation). We may not have time for that, but engine's features would make it fairly easy task.
• Rendering model's and view's selection along the data.
• All kind of fancy UI features, like tree folding, blinking on a change, etc.

[pomek]

First working version - https://github.com/ckeditor/ckeditor5/tree/hackathon/graphical-model-representation.

Short GIF which shows how it works - https://twitter.com/pomekPL/status/740149101334016000

Unfortunately, this is very basic version (like MVP) which can be improved. But what’s important works perfectly! :)

[fredck]

Here we have an example of inspector that can be used as devtools on different browsers or even as a bookmarklet: https://github.com/emberjs/ember-inspector

It would be great to have something similar.