JSON Schema Editor

Generates HTML for creating and modifying json schemas. I created this because json-editor is not good at modifying schemas (using the meta schema) and couldn't find any other good UI for making json schemas. css style is bootstrap3

Getting started

---

1. Make sure React is loaded on your page. Read more at facebook/react.

2. Include JSON Schema Editor

• Using npm:

npm install json-schema-editor

var JSONSchemaEditor = require('json-schema-editor');

• Old-fashioned style:

<script src="node_modules/dist/jsonschemaeditor.js"></script>

3. Add an element to your page to contain the editor

<div id="container"></div>

4. Initialize the component

var element = document.getElementById('container');
var editor = new JSONSchemaEditor(element, {});
editor.setSchema(product);

5. Get the schema value (generally after the user presses a button e.g. save)

editor.getSchema();

{
  type: "object",
  perporties: {
    name: {
      type: "string"
    }
  }
}

6. Get the form value (generally after the user presses a button e.g. save)

editor.getForm();

["*"]

7. Get the both value (generally after the user presses a button e.g. save)

editor.getValue();

{
  scheam:{
    type: "object",
    perporties: {
      name: {
        type: "string"
      }
    }
  },
  form: ["*"]
}

Example

---

Here is what the product schema example looks like rendered.
Demo URL: Go to my demo page.

Todo

• Add support for the description field.
• exclusiveMinimum and exclusiveMaximum, are these even necessary?
• refs
• definitions
• patternProperties
• allOf, anyOf, oneOf