🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A React JSON Schema Editor that generates HTML for creating and modifying json schemas.

React Text

Documentation

JSON Schema Editor

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

You May Also Like