<div id="{{ name }}_editor"></div>

<script>
  var container = document.getElementById("{{ name }}_editor");
  var options = {
    theme: "bootstrap3",
    iconlib: "fontawesome4",
    schema: {{ schema|safe }},
    // Disable additional properties
    no_additional_properties: true,
    keep_oneof_values: true
  };
  var {{ name }}_editor = new JSONEditor(container, options);
  JSONEditor.plugins.sceditor.emoticonsEnabled = {{ sceditor }};
  {{ name }}_editor.on('change', function () {
    var errors = {{ name }}_editor.validate();
    if (errors.length) {
      console.log(errors);
    }
    var json = {{ name }}_editor.getValue();
    document.getElementById("id_{{ name }}").value = JSON.stringify(json);
  });
  {% if data %}
    var json = {{ data|safe }};
    {{ name }}_editor.setValue(json);
  {% endif %}
</script>

<textarea
  cols="40"
  id="id_{{ name }}"
  name="{{ name }}"
  rows="10"
  required=""
  style="display: none"
>
  {{ data|safe }}
</textarea>
