GUI for editing JSON

[jimafisk]

This issue is part of the Git-CMS epic: https://github.com/plentico/plenti/issues/24

There are going to be times when a developer will want to add key/values to a content source that can't easily be edited through the frontend display because they are related to non-visual elements, like metadata for example. The web developer may want to expose this information to a content editor so we need an interface to accomplish this.

Here are the specs I envision:

• Users can edit values through the GUI, but not keys
• Arrays will have a widget to add/remove items
• Default structure is fed off corresponding _blueprint.json file
• Structural changes should be made to _blueprint.json directly, outside of the GUI
• Validation (e.g. int vs string) is based on initial values in _blueprint.json

The above specs don't allow very much flexibility. For instance, you could design your templates to accommodate a content source with different types of values for a single key across your JSON files (e.g. if a single value is present it could be a string, but if you have multiple values it could be an array). Being rigid in this way could have the advantage of enforcing better content modeling principals, but also could be frustrating if the content schema is out of your control like when you're pulling from an API.

There is also some "magic" involved, although hopefully it's good. We should provide a tooltip if someone tries to put an int in a string field for instance that says something like "the default value for the title key in content/blog/_blueprint.json is a string, please change this if you'd like to add an integer." The widgets are also automatically based on your JSON structure, which is similar to my vision for the in-page widgets being based on your HTML. This is intentional so you aren't constantly defining widget types for everything, you should just feel like you're writing JSON and markup and the CMS is intuitively figuring out how to make that editable. It's much less explicit so you won't have as much control, but you should feel more productive and can always eject the CMS if you want to customize it.

Quick sketching of ideas


Don't worry, the goal is to still to focus primarily on in-page editing, this is just a fallback behavior. However, it's likely to be the initial focus since it encompasses the entire content source schema. We could build this interface off of the content.fields prop already available through the generator and we'd know exactly how it maps back to the JSON source.

List of GUI JSON editors for inspiration: https://stackoverflow.com/questions/998832/gui-based-or-web-based-json-editor-that-works-like-property-explorer

[jimafisk]

This mentions https://github.com/caolan/forms

[jimafisk]

This looks like a great svelte-based starting point: https://github.com/tanhauhau/svelte-json-tree