test/test_bootstrap.html

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">

  <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css">
  <!--<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet" type="text/css">-->

  <link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
  <script src="../dist/jsoneditor.js"></script>

  <style type="text/css">
    #jsoneditor {
      width: 500px;
      height: 500px;
    }

  </style>
</head>
<body>
<p>
  Test with bootstrap
</p>

<div id="jsoneditor"></div>

<script>
  var container = document.getElementById('jsoneditor');
  var options = {
    "mode": "tree",
    "modes": [
      "tree",
      "form",
      "code",
      "text",
      "view"
    ],
    "history": false,
    onChange: function () {
      if (editor) {
        // if you comment out the next line of code, the problem is solved
        // editor.get() throws an exception when the editor does not
        // contain valid JSON.
        console.log('change', editor.get())
      }
    }
  };
  var editor = new JSONEditor(container, options);

  var text = "[{\"test\":\"test\"}]";
  var json = JSON.parse(text);
  editor.set(json);

</script>
</body>
</html>