JSON Schema Designer

The JSON Schema Designer is a web component that allows easy JSON Schema creation and configuration with a GUI point and click interface.

Installation

• Run npm install json-schema-designer --save
• Put a script tag similar to this <script src='node_modules/json-schema-designer/dist/jsonschemadesigner.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

Basic Usage

Properties

• inputschema (optional) - an object containing the JSON Schema to load into the designer.
• inputtranslation (optional) - an object containing translations for the strings within the designer.
• viewmode (optional) - the view mode of the designer. options are "tabs", "columns" and "designerOnly" (default)
• datatypes (optional) - list of datatypes that can be selected for each item except for root. default: ['string', 'number', 'integer', 'object', 'array', 'boolean', 'null', '$ref']
• usedefinitions (optional) - boolean value that allows or disallows the adding of definitions to the json schema. (default: true)

Note: all properties passed to the component will be stringified.

<json-schema-designer
  id="json-designer"
  viewmode="designerOnly"
  inputschema={{schema}}
  inputtranslations={{translations}}
  datatypes={{datatypes}}
  usedefinitions="true">
</json-schema-designer>

Methods

• exportSchema - returns the stringified JSON object of the configured JSON Schema.

Example Usage:

let schemaDesigner = document.querySelector('#json-designer')
let jsonSchema = JSON.parse(schemaDesigner.exportSchema())

Advanced Usage

To add your own translations to the designer, pass in a translations object with the following format:

{
  "json-schema-designer": {
    "schema": "Schema",
    "definitions": "Definitions",
    "add-definition": "Add Definition"
    ...
  }
}

Only translation found inside of the "json-schema-designer" key will be used.

A list of all translatable strings can be found in src/global/i18n.ts

References

https://json-schema.org/

https://stenciljs.com/docs/introduction/