JSON Editor

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link data-require="jsoneditor@*" data-semver="1.6.2" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jsoneditor/1.6.2/jsoneditor-min.css" />
    <script data-require="jquery@3.0.0" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script type="javascript" src="https://raw.githubusercontent.com/jdorn/json-editor/master/dist/jsoneditor.min.js"></script>
    <script data-require="bootstrap@3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <h1>JSON Editor example</h1>
    <div id="editor_holder"></div>
  </body>
</html>

// Code goes here

var data = {
  "name": "Jeremy Dorn",
  "age": 25,
  "favorite_color": "#ffa500",
  "gender": "male",
  "location": {
    "city": "San Francisco",
    "state": "CA",
    "citystate": "San Francisco, CA"
  },
  "pets": [
    {
      "type": "dog",
      "name": "Walter"
    }
  ]
};

var schema = {
  "title": "Person",
  "type": "object",
  "properties": {
    "name": {
      "type": "string",
      "description": "First and Last name",
      "minLength": 4,
      "default": "Jeremy Dorn"
    },
    "age": {
      "type": "integer",
      "default": 25,
      "minimum": 18,
      "maximum": 99
    },
    "favorite_color": {
      "type": "string",
      "format": "color",
      "title": "favorite color",
      "default": "#ffa500"
    },
    "gender": {
      "type": "string",
      "enum": [
        "male",
        "female"
      ]
    },
    "location": {
      "type": "object",
      "title": "Location",
      "properties": {
        "city": {
          "type": "string",
          "default": "San Francisco"
        },
        "state": {
          "type": "string",
          "default": "CA"
        },
        "citystate": {
          "type": "string",
          "description": "This is generated automatically from the previous two fields",
          "template": "{{city}}, {{state}}",
          "watch": {
            "city": "location.city",
            "state": "location.state"
          }
        }
      }
    },
    "pets": {
      "type": "array",
      "format": "table",
      "title": "Pets",
      "uniqueItems": true,
      "items": {
        "type": "object",
        "title": "Pet",
        "properties": {
          "type": {
            "type": "string",
            "enum": [
              "cat",
              "dog",
              "bird",
              "reptile",
              "other"
            ],
            "default": "dog"
          },
          "name": {
            "type": "string"
          }
        }
      },
      "default": [
        {
          "type": "dog",
          "name": "Walter"
        }
      ]
    }
  }
};

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

// Initialize the editor
var editor = new JSONEditor(document.getElementById("editor_holder"),{
  theme: 'bootstrap3',
  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...
});

/* Styles go here */