Editor

Below is the editor generated from the JSON Schema.

Direct Link (preserves schema, value, and options)

JSON Output

You can also make changes to the JSON here and set the value in the editor by clicking

Options

Validation

This will update whenever the form changes to show validation errors if there are any.

Schema

You can change the schema and see how the generated form looks. After you make changes, click

Code

// Set default options
JSONEditor.defaults.options.theme = 'bootstrap2';

// Initialize the editor
var editor = new JSONEditor(document.getElementById("editor_holder"),{
  schema: {
      type: "object",
      properties: {
          name: { "type": "string" }
      }
  }
});

// Set the value
editor.setValue({
    name: "John Smith"
});

// Get the value
var data = editor.getValue();
console.log(data.name); // "John Smith"

// Validate
var errors = editor.validate();
if(errors.length) {
  // Not valid
}

// Listen for changes
editor.on("change",  function() {
  // Do something...
});