diff --git a/src/theme/book.js b/src/theme/book.js
index 7fa0364b..828875b4 100644
--- a/src/theme/book.js
+++ b/src/theme/book.js
@@ -144,23 +144,20 @@ function playground_text(playground) {
             .then(response => {
                 result_block.innerText = "";
                 var iframe = result_block.appendChild(document.createElement('iframe')),
-                    doc = iframe.contentWindow.document,
-                    options = {
-                        objid: 152,
-                        key: 316541321
-                    },
-                    //src = "host/widget.js",
-                    uri = encodeURIComponent(JSON.stringify(options));
-                doc.someVar = "Hello World!";
-                iframe.id = "iframewidget";
-                iframe.width = result_block.width;
-                iframe.height = result_block.height;
-
-                var html = '<body onload="var d=document;' +
-                    'var script=d.createElement(\'script\');script.type=\'module\';script.src=\'wasm-test.js\';' +
-                    'd.getElementsByTagName(\'head\')[0].appendChild(script);"><div id="button_click"></div></body>';
-                doc.open().write(html);
-                doc.close();
+                    doc = iframe.contentWindow.document;
+                iframe.id = "wasm-rendering";
+                iframe.style.width = "100%";
+                iframe.style.height = "100%";
+                var xhr = new XMLHttpRequest();
+                xhr.open('GET', 'iframe.html', true);
+                xhr.onreadystatechange = function () {
+                    if (this.readyState !== 4) return;
+                    if (this.status !== 200) return; // or whatever error handling you want
+                    var html = this.responseText;
+                    doc.open().write(html);
+                    doc.close();
+                };
+                xhr.send();
             })
             .catch(error => result_block.innerText = "Playground Communication: " + error.message);
 
diff --git a/src/theme/iframe.html b/src/theme/iframe.html
new file mode 100644
index 00000000..0ad37768
--- /dev/null
+++ b/src/theme/iframe.html
@@ -0,0 +1,18 @@
+<!-- Code injected from iframe.html -->
+<head>
+    <script>
+        // dynamically create script element and append to head
+        // call wasm-entry to load the built wasm.js
+        function body_onload() {
+            var d = document;
+            var script = d.createElement('script');
+            script.type = 'module';
+            script.src = 'wasm-entry.mjs';
+            d.getElementsByTagName('head')[0].appendChild(script);
+        }
+    </script>
+</head>
+
+<body onload="body_onload();">
+    <div id="_start"></div>
+</body>
\ No newline at end of file
diff --git a/src/theme/wasm-entry.mjs b/src/theme/wasm-entry.mjs
new file mode 100644
index 00000000..1fc9ec01
--- /dev/null
+++ b/src/theme/wasm-entry.mjs
@@ -0,0 +1,3 @@
+import init from './wasm.js';
+
+init();
\ No newline at end of file
