<script src="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/10.1.2/jsoneditor-minimalist.js" integrity="sha512-nE5Fvsy9rTqI8XmarA3NcrUaueECbWRlgTTMdUwDC8okoc0HbObAeRTMsGH2qHxf4fYFOgErgkJSRmN7BUklCA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/10.1.2/jsoneditor.min.css" integrity="sha512-8G+Vb2+10BSrSo+wupdzJIylDLpGtEYniQhp0rsbTigPG7Onn2S08Ai/KEGlxN2Ncx9fGqVHtRehMuOjPb9f8g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div id="jsoneditor" class="w-full h-full p-4"></div>
<script>
  const container = document.getElementById('jsoneditor');
  const options = {
    mode: 'view',
    theme: 'ace/theme/monokai/dark',
  };
  const content_url = "<%= path %>";
  const editor = new JSONEditor(container, options);
  fetch(content_url).then(response => response.json()).then(data => {
    editor.set(data);
    editor.expandAll();
  }).catch(error => {
    container.innerHTML = "Error loading JSON: " + error;
  })
</script>
