diff --git a/examples/external-url-demo/src/App.tsx b/examples/external-url-demo/src/App.tsx
index a2d21de6..405a411e 100644
--- a/examples/external-url-demo/src/App.tsx
+++ b/examples/external-url-demo/src/App.tsx
@@ -57,9 +57,12 @@ function App() {
       <div className="demo-section">
         <h2>Interactive Demo</h2>
         <p>Toggle between direct and proxied loading:</p>
-        <button className="toggle" onClick={() => setUseProxy(!useProxy)}>
-          Toggle Proxy
-        </button>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '20px' }}>
+          <button className="toggle" onClick={() => setUseProxy(!useProxy)}>
+            Toggle Proxy
+          </button>
+          <h1>{useProxy ? 'Proxied' : 'Direct (no proxy)'}</h1>
+        </div>
         <div id="demo-container">
           <UIResourceRenderer resource={resource} htmlProps={useProxy ? { proxy } : {}} />
         </div>
diff --git a/packages/client/scripts/proxy/index.html b/packages/client/scripts/proxy/index.html
index 1e40ae0b..24c72607 100644
--- a/packages/client/scripts/proxy/index.html
+++ b/packages/client/scripts/proxy/index.html
@@ -50,6 +50,16 @@
         inner.style = 'width:100%; height:100%; border:none;';
         inner.sandbox = 'allow-same-origin allow-scripts';
         document.body.appendChild(inner);
+        window.addEventListener('message', (event) => {
+          // listen for messages from the iframe and send them to the parent
+          if (event.source === inner.contentWindow) {
+            window.parent.postMessage(event.data, '*');
+          }
+          // listen for messages from the parent and send them to the iframe
+          if (event.source === window.parent) {
+            inner.contentWindow.postMessage(event.data, '*');
+          }
+        });
       }
     </script>
   </body>