https://github.com/purecloudlabs/json-schema-designer
https://github.com/purecloudlabs/json-schema-designer
Last synced: 7 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/purecloudlabs/json-schema-designer
- Owner: purecloudlabs
- License: mit
- Created: 2018-07-12T20:16:20.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2025-01-03T06:34:16.000Z (over 1 year ago)
- Last Synced: 2025-04-11T09:15:18.799Z (over 1 year ago)
- Language: TypeScript
- Size: 5.24 MB
- Stars: 6
- Watchers: 2
- Forks: 2
- Open Issues: 14
-
Metadata Files:
- Readme: readme.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# 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 `` 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.
```html
```
### Methods
* exportSchema - returns the stringified JSON object of the configured JSON Schema.
Example Usage:
```javascript
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:
```javascript
{
"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/