Research Node UI JSON Schema parsers/validators

[geoffturk]

https://github.com/json-editor/json-editor 🚀 🎸 🌔 https://github.com/jsonform/jsonform https://github.com/eclipsesource/jsonforms https://github.com/rjsf-team/react-jsonschema-form

Requirements for Node UI:

• convert JSON Schema to forms automatically
• good community support of package
• supports latest JSON Schema spec (2019-09)
• ideally zero npm package dependencies
• customizable CSS/themes
• preference to not rely on a specific JS framework (e.g., React) to enable integration with whatever framework (Svelte, Mithril, etc) we end up using, assuming a framework is wanted/useful
• Support for autocomplete fields
• XHR communications with index and library APIs
• Ability to manipulate JSON-Schema JSON to merge schemas (which become the input for JSON-editor)
• API communications with CMS or other server-side code for storing the output JSON, in cases where the UI is embedded in a plugin or other code on the node server

[geoffturk]

JSON Editor fulfills most of the requirements above and is probably the best fit for us at this stage of the project.

The requirements above that it does not meet are:

• supports latest JSON Schema spec (2019-09) - this is not an issue since most of the functionality we need goes back to the draft-04 spec
• Ability to manipulate JSON-Schema JSON to merge schemas (which become the input for JSON-editor) - it only takes a single schema as input, but the merging can be done outside of JSON Editor and then fed into it as a single schema - will need to prototype this and look at UX for it too before implementing fully

Another issue is that the validation may not be as thorough as some other JSON Schema validation tools, so we may want to use a separate validator like ajv when validating schemas before submission to the index.

@Photosynthesis I am going to close this issue given that JSON Editor appears to be the best choice for now, but feel free to reopen if you want to explore it further or find another solution that looks like a better fit.

[geoffturk]

One issue with JSON Editor is that it expects to have formatting logic embedded within the schema instance. This is not ideal because the schema instance should only contain data, not information about how to display that data in a specific editor.

For example, in order to get an array to display correctly, it must have the key/value pair "format": "table" embedded in the instance. If you leave it out, you get this (note the missing input field):

But when you add the format key it displays correctly:

You can try this yourself by going to the interaction editor:
https://json-editor.github.io/json-editor/

Then scroll down to replace the schema with the schema below, then click Update Schema. Reload the page and try it with and without the format key/value pair included.

{
    "type": "object",
    "title": "Test of Array without Format key",
    "properties": {
        "linked_schemas": {
            "title": "Linked Schemas",
            "description": "The schemaIds against which the profile must be validated",
            "type": "array",
            "format": "table",
            "items": {
                "type": "string",
                "pattern": "[A-Fa-f0-9]{64}"
            },
            "minItems": 1,
            "maxItems": 10,
            "uniqueItems": true,
            "context": "need to define and create a permanent URL"
        }
    }
}

[geoffturk]

One issue we came up against in JSON Editor was the inability to add labels to an enumerated list of options (e.g., map a "machine readable" option like nfp to a "human readable" label like Not for Profit for display in the form UI).

After some more research into this issue, and by widening the net to include React projects for JSON Schema, we found: https://github.com/eclipsesource/jsonforms

JSON Forms can handle the above case and has a clever approach by adding a UI definition on top of the JSON Schema definition, which gives a lot of flexibility in how the UI for a schema can be presented to users.