JSON Schema Editor

This project is no longer being actively maintained. I have ported it over to Vue.js in vue-json-schema-editor and that is an improved and less buggy implementation.

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.

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.setValue(product);

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

editor.getValue();

Example

Here is what the product schema example looks like rendered.

Todo

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

Online Schema Tester