<iframe id="jsoncrackEmbed" src="https://jsoncrack.com/widget"></iframe>

<script>
  const jsonCrackEmbed = document.querySelector("iframe");
  
  const json = JSON.stringify({
    "section": "It loaded!"
  });
  
  window?.addEventListener("message", (event) => {
    jsonCrackEmbed.contentWindow.postMessage({
      json
    }, "*");
  });
</script>
body {
  margin: 0;
  padding: 0;
}

section {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

textarea {
  width: 100%;
  height: 100%;
}

div {
  display: flex;
  width: 100%;
  height: 150px;
}

#jsoncrackEmbed {
  flex: 1;
  order: 2;
  border: none;
  width: 100%;
  height: 100vh;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.