json-schema-designer
TypeScript icon, indicating that this package has built-in type declarations

0.0.21 • Public • Published

Built With Stencil

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/

Readme

Keywords

none

Package Sidebar

Install

npm i json-schema-designer

Weekly Downloads

9

Version

0.0.21

License

MIT

Unpacked Size

3.95 MB

Total Files

61

Last publish

Collaborators

  • pmoaddel
  • bmherold
  • jstith