<div {% if not widget.attrs.style %}style="height:{{widget.height|default:'500px'}};width:{{widget.width|default:'90%'}};display:inline-block;"{% endif %}{% include "django/forms/widgets/attrs.html" %}></div>

<textarea id="{{widget.attrs.id}}_textarea" name="{{ widget.name }}" required="" style="display: none">{{ widget.value }}</textarea>

<script>
    (function() {
        var container = document.getElementById("{{ widget.attrs.id }}");
        var textarea = document.getElementById("{{widget.attrs.id}}_textarea");

        var options = {{ widget.options|safe }};
        options.onChange = function () {
            var json = editor.get();
            textarea.value=JSON.stringify(json);
        }

        var editor = new JSONEditor(container, options);
        var json = {{ widget.value|safe }};
        editor.set(json);
    })();
</script>
