json-schema-editor

React based editor for JSON Schemas


License
MIT
Install
npm install json-schema-editor@0.2.10

Documentation

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.

npm badge

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>
  1. Add an element to your page to contain the editor
<div id="container"></div>
  1. Initialize the component
var element = document.getElementById('container');
var editor = new JSONSchemaEditor(element, {});
editor.setValue(product);
  1. 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.

JSON Schema Editor Example

Todo

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

Online Schema Tester