itty-bitty/docs/render/recipe.html

<link rel="stylesheet" href="recipe.css" inline>
<script src="recipe.js" inline></script>
<script>
  function loadScript(src, callback, type = "module") {
    let promise =  new Promise((resolve, reject) => {
      let script = document.createElement("script")
      script.type = type;
      script.onload = resolve;
      script.src = src
      document.head.appendChild(script);
    })
    return callback ? promise.then(callback) : promise;
  }

  window.addEventListener("message", function(e) {
    let data = e.data;
    window.script = data.script
    window.params = data;
    window.params.origin = e.origin;
    console.log("🖊 Rendering with", {script:data.script, params:data})

    render()

    loadScript("../js/qrious.min.js", null, "").then(() => {
      var qr = new QRious({
        element: document.getElementById("qr"),
        background: 'transparent',
        foreground: 'currentColor',
        size: 512,
        value: params.originalURL.substring(0),
      });
      
    })
  }, false);
</script>