JSON Editor Test

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/5.7.2/jsoneditor.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/5.7.2/jsoneditor.min.css">
<div class="debug">
  <div id="jsoneditor"></div>
</div>

SCSS

body {
  margin-right: 60%;
}

.debug {
  #jsoneditor {
    background-color: #fafafa;
    width: 100%;
    height: 100%;
  }
  height: 100%;
  width: 40%;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: #111;
}

JavaScript

// create the editor
var container = document.getElementById("jsoneditor");
var options = {};
var editor = new JSONEditor(container, options);

// set json
var json = {
  "Array": [1, 2, 3],
  dasdas: [
  {
  dsd: true
  }
  ],
  voolean: true,
  "Null": null,
  "Number": 123,
  "Object": {
    "a": "b",
    "c": "d"
  },
  "String": "Hello World"
};
editor.set(json);

// get json
var json = editor.get();