The JSON Schema Designer is a web component that allows easy JSON Schema creation and configuration with a GUI point and click interface.
- 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
- 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>- 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())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