rework embeds

src/client/ui/App.css

···
   border-color: #555;
 }
 
+.App-embedModal-tabs {
+  display: inline-flex;
+  background: var(--bg);
+  border-radius: 6px;
+  padding: 3px;
+  margin-bottom: 12px;
+}
+
+.App-embedModal-tab {
+  background: transparent;
+  border: none;
+  color: var(--text-dim);
+  padding: 5px 12px;
+  border-radius: 4px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.App-embedModal-tab:hover {
+  color: var(--text);
+}
+
+.App-embedModal-tab--active {
+  background: var(--border);
+  color: var(--text-bright);
+}
+
 .App-embedModal-footer {
   padding: 16px;
   border-top: 1px solid var(--border);

src/client/ui/App.tsx

···
-import React, { useState, useRef, useEffect, type ChangeEvent, type MouseEvent } from "react";
+import React, { useState, useEffect, type ChangeEvent, type MouseEvent } from "react";
 import { version } from "react";
 import { SAMPLES, type Sample } from "../samples.ts";
 import REACT_VERSIONS from "../../../scripts/versions.json";
···
   client: string;
 };
 
+function encodeCode(code: CodeState): string {
+  const json = JSON.stringify({ server: code.server, client: code.client });
+  return btoa(unescape(encodeURIComponent(json)));
+}
+
 type EmbedModalProps = {
   code: CodeState;
   onClose: () => void;
 };
 
 function EmbedModal({ code, onClose }: EmbedModalProps): React.ReactElement {
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
   const [copied, setCopied] = useState(false);
+  const [tab, setTab] = useState<"html" | "jsx">("html");
 
-  const [embedCode] = useState(() => {
-    const base = window.location.origin + window.location.pathname.replace(/\/$/, "");
-    const id = Math.random().toString(36).slice(2, 6);
-    return `<div id="rsc-${id}" style="height: 500px;"></div>
-<script type="module">
-import { mount } from '${base}/embed.js';
+  const base = window.location.origin + window.location.pathname.replace(/\/$/, "");
+  const encoded = encodeCode(code);
+  const embedUrl = `${base}/embed.html?c=${encodeURIComponent(encoded)}`;
 
-mount('#rsc-${id}', {
-  server: \`
-${code.server}
-  \`,
-  client: \`
-${code.client}
-  \`
-});
-</script>`;
-  });
+  const htmlCode = `<iframe
+  style="width: 100%; height: 500px; border: 1px solid #eee; border-radius: 8px;"
+  src="${embedUrl}"
+></iframe>`;
+
+  const jsxCode = `<iframe
+  style={{ width: "100%", height: 500, border: "1px solid #eee", borderRadius: 8 }}
+  src="${embedUrl}"
+/>`;
+
+  const embedCode = tab === "html" ? htmlCode : jsxCode;
 
   const handleCopy = (): void => {
     navigator.clipboard.writeText(embedCode);
···
           </button>
         </div>
         <div className="App-embedModal-body">
-          <p className="App-embedModal-description">Copy and paste this code into your HTML:</p>
+          <div className="App-embedModal-tabs">
+            <button
+              className={`App-embedModal-tab ${tab === "html" ? "App-embedModal-tab--active" : ""}`}
+              onClick={() => setTab("html")}
+            >
+              HTML
+            </button>
+            <button
+              className={`App-embedModal-tab ${tab === "jsx" ? "App-embedModal-tab--active" : ""}`}
+              onClick={() => setTab("jsx")}
+            >
+              JSX
+            </button>
+          </div>
           <textarea
-            ref={textareaRef}
             className="App-embedModal-textarea"
             readOnly
             value={embedCode}
···
   });
   const [liveCode, setLiveCode] = useState<CodeState>(workspaceCode);
   const [showEmbedModal, setShowEmbedModal] = useState(false);
-  const iframeRef = useRef<HTMLIFrameElement>(null);
 
+  // Listen for code changes from the embed iframe
   useEffect(() => {
     const handleMessage = (event: MessageEvent): void => {
       const data = event.data as { type?: string; code?: CodeState };
-      if (data?.type === "rsc-embed:ready") {
-        iframeRef.current?.contentWindow?.postMessage(
-          {
-            type: "rsc-embed:init",
-            code: workspaceCode,
-            showFullscreen: false,
-          },
-          "*",
-        );
-      }
-      if (data?.type === "rsc-embed:code-changed" && data.code) {
+      if (data?.type === "rscexplorer:edit" && data.code) {
         setLiveCode(data.code);
       }
     };
 
     window.addEventListener("message", handleMessage);
     return () => window.removeEventListener("message", handleMessage);
-  }, [workspaceCode]);
+  }, []);
 
+  // Reset liveCode when workspaceCode changes (e.g., sample switch)
   useEffect(() => {
-    // eslint-disable-next-line react-hooks/set-state-in-effect
     setLiveCode(workspaceCode);
-    if (iframeRef.current?.contentWindow) {
-      iframeRef.current.contentWindow.postMessage(
-        {
-          type: "rsc-embed:init",
-          code: workspaceCode,
-          showFullscreen: false,
-        },
-        "*",
-      );
-    }
   }, [workspaceCode]);
+
+  const embedUrl = `embed.html?c=${encodeURIComponent(encodeCode(workspaceCode))}`;
 
   const handleSave = (): void => {
     saveToUrl(liveCode.server, liveCode.client);
···
         </div>
         <BuildSwitcher />
       </header>
-      <iframe ref={iframeRef} src="embed.html" style={{ flex: 1, border: "none", width: "100%" }} />
+      <iframe key={embedUrl} src={embedUrl} style={{ flex: 1, border: "none", width: "100%" }} />
       {showEmbedModal && <EmbedModal code={liveCode} onClose={() => setShowEmbedModal(false)} />}
     </>
   );

src/client/ui/EmbedApp.tsx

···
-import React, { useState, useEffect } from "react";
+import React from "react";
+import { SAMPLES } from "../samples.ts";
 import { Workspace } from "./Workspace.tsx";
 import "./EmbedApp.css";
 
-const DEFAULT_SERVER = `export default function App() {
-  return <h1>RSC Explorer</h1>;
-}`;
-
-const DEFAULT_CLIENT = `'use client'
-
-export function Button({ children }) {
-  return <button>{children}</button>;
-}`;
+const DEFAULT_SAMPLE = SAMPLES.hello as { server: string; client: string };
 
 type CodeState = {
   server: string;
   client: string;
 };
 
-type EmbedInitMessage = {
-  type: "rsc-embed:init";
-  code?: {
-    server?: string;
-    client?: string;
-  };
-  showFullscreen?: boolean;
-};
+function getCodeFromUrl(): CodeState {
+  const params = new URLSearchParams(window.location.search);
+  const encoded = params.get("c");
 
-type EmbedReadyMessage = {
-  type: "rsc-embed:ready";
-};
+  if (encoded) {
+    try {
+      const json = decodeURIComponent(escape(atob(encoded)));
+      const parsed = JSON.parse(json) as { server?: string; client?: string };
+      return {
+        server: (parsed.server ?? DEFAULT_SAMPLE.server).trim(),
+        client: (parsed.client ?? DEFAULT_SAMPLE.client).trim(),
+      };
+    } catch {
+      // Fall through to defaults
+    }
+  }
 
-type EmbedCodeChangedMessage = {
-  type: "rsc-embed:code-changed";
-  code: {
-    server: string;
-    client: string;
+  return {
+    server: DEFAULT_SAMPLE.server,
+    client: DEFAULT_SAMPLE.client,
   };
-};
-
-function isEmbedInitMessage(data: unknown): data is EmbedInitMessage {
-  return (
-    typeof data === "object" &&
-    data !== null &&
-    (data as { type?: string }).type === "rsc-embed:init"
-  );
 }
 
-export function EmbedApp(): React.ReactElement | null {
-  const [code, setCode] = useState<CodeState | null>(null);
-  const [showFullscreen, setShowFullscreen] = useState(false);
-
-  useEffect(() => {
-    const handleMessage = (event: MessageEvent<unknown>): void => {
-      const { data } = event;
-      if (isEmbedInitMessage(data)) {
-        setCode({
-          server: (data.code?.server ?? DEFAULT_SERVER).trim(),
-          client: (data.code?.client ?? DEFAULT_CLIENT).trim(),
-        });
-        if (data.showFullscreen !== false) {
-          setShowFullscreen(true);
-        }
-      }
-    };
-
-    window.addEventListener("message", handleMessage);
-
-    if (window.parent !== window) {
-      const readyMessage: EmbedReadyMessage = { type: "rsc-embed:ready" };
-      window.parent.postMessage(readyMessage, "*");
-    }
+function getFullscreenUrl(code: CodeState): string {
+  const json = JSON.stringify({ server: code.server, client: code.client });
+  const encoded = btoa(unescape(encodeURIComponent(json)));
+  return `https://rscexplorer.dev/?c=${encodeURIComponent(encoded)}`;
+}
 
-    return () => window.removeEventListener("message", handleMessage);
-  }, []);
+export function EmbedApp(): React.ReactElement {
+  const initialCode = getCodeFromUrl();
 
   const handleCodeChange = (server: string, client: string): void => {
     if (window.parent !== window) {
-      const changedMessage: EmbedCodeChangedMessage = {
-        type: "rsc-embed:code-changed",
-        code: { server, client },
-      };
-      window.parent.postMessage(changedMessage, "*");
+      window.parent.postMessage(
+        {
+          type: "rscexplorer:edit",
+          code: { server, client },
+        },
+        "*",
+      );
     }
   };
 
-  const getFullscreenUrl = (): string => {
-    if (!code) return "#";
-    const json = JSON.stringify({ server: code.server, client: code.client });
-    const encoded = encodeURIComponent(btoa(unescape(encodeURIComponent(json))));
-    return `https://rscexplorer.dev/?c=${encoded}`;
-  };
-
-  if (!code) {
-    return null;
-  }
-
   return (
     <>
-      {showFullscreen && (
-        <div className="EmbedApp-header">
-          <span className="EmbedApp-title">RSC Explorer</span>
-          <a
-            href={getFullscreenUrl()}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="EmbedApp-fullscreenLink"
-            title="Open in RSC Explorer"
+      <div className="EmbedApp-header">
+        <span className="EmbedApp-title">RSC Explorer</span>
+        <a
+          href={getFullscreenUrl(initialCode)}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="EmbedApp-fullscreenLink"
+          title="Open in RSC Explorer"
+        >
+          <svg
+            width="14"
+            height="14"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
           >
-            <svg
-              width="14"
-              height="14"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-            >
-              <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3" />
-            </svg>
-          </a>
-        </div>
-      )}
+            <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3" />
+          </svg>
+        </a>
+      </div>
       <Workspace
-        key={`${code.server}:${code.client}`}
-        initialServerCode={code.server}
-        initialClientCode={code.client}
+        initialServerCode={initialCode.server}
+        initialClientCode={initialCode.client}
         onCodeChange={handleCodeChange}
       />
     </>

test-embed.html

···
         border-bottom: 1px solid #eee;
         padding-bottom: 8px;
       }
-      .embed-container {
+      iframe {
+        width: 100%;
         height: 500px;
+        border: none;
+        border-radius: 8px;
         margin-bottom: 40px;
       }
     </style>
···
 
     <h2>Hello World</h2>
     <p>The simplest possible server component.</p>
-    <div id="hello" class="embed-container"></div>
+    <iframe id="hello"></iframe>
 
     <h2>Counter</h2>
     <p>A client component with state, rendered from a server component.</p>
-    <div id="counter" class="embed-container"></div>
+    <iframe id="counter"></iframe>
 
     <h2>Async Component</h2>
     <p>Server components can be async and use Suspense for loading states.</p>
-    <div id="async" class="embed-container"></div>
+    <iframe id="async"></iframe>
 
     <h2>Form Action</h2>
     <p>Server actions handle form submissions with useActionState.</p>
-    <div id="form" class="embed-container"></div>
-  </body>
+    <iframe id="form"></iframe>
 
-  <script type="module">
-    import { mount } from "http://localhost:3333/embed.js";
+    <script>
+      function encodeCode(code) {
+        const json = JSON.stringify(code);
+        return encodeURIComponent(btoa(unescape(encodeURIComponent(json))));
+      }
 
-    mount("#hello", {
-      server: `export default function App() {
+      function setEmbed(id, code) {
+        document.getElementById(id).src = `/embed.html?c=${encodeCode(code)}`;
+      }
+
+      setEmbed("hello", {
+        server: `export default function App() {
   return <h1>Hello World</h1>
 }`,
-      client: `'use client'`,
-    });
+        client: `'use client'`,
+      });
 
-    mount("#counter", {
-      server: `import { Counter } from './client'
+      setEmbed("counter", {
+        server: `import { Counter } from './client'
 
 export default function App() {
   return (
···
     </div>
   )
 }`,
-      client: `'use client'
+        client: `'use client'
 
 import { useState } from 'react'
 
···
     </div>
   )
 }`,
-    });
+      });
 
-    mount("#async", {
-      server: `import { Suspense } from 'react'
+      setEmbed("async", {
+        server: `import { Suspense } from 'react'
 
 export default function App() {
   return (
···
   await new Promise(r => setTimeout(r, 500))
   return <p>Data loaded!</p>
 }`,
-      client: `'use client'`,
-    });
+        client: `'use client'`,
+      });
 
-    mount("#form", {
-      server: `import { Form } from './client'
+      setEmbed("form", {
+        server: `import { Form } from './client'
 
 export default function App() {
   return (
···
   if (!name) return { message: null, error: 'Please enter a name' }
   return { message: \`Hello, \${name}!\`, error: null }
 }`,
-      client: `'use client'
+        client: `'use client'
 
 import { useActionState } from 'react'
 
···
     </form>
   )
 }`,
-    });
-  </script>
-
-  <div id="rsc-explorer" style="height: 500px"></div>
-  <script type="module">
-    import { mount } from 'https://rscexplorer.dev/embed.js';
-
-    mount('#rsc-explorer', {
-      server: `
-    import { Suspense } from 'react'
-    import { Timer, Router } from './client'
-
-    export default function App() {
-      return (
-        <div>
-          <h1>Router Refresh!!!</h1>
-          <p style={{ marginBottom: 12, color: '#666' }}>
-            Client state persists across server navigations
-          </p>
-          <Suspense fallback={<p>Loading...</p>}>
-            <Router initial={renderPage()} refreshAction={renderPage} />
-          </Suspense>
-        </div>
-      )
-    }
-
-    async function renderPage() {
-      'use server'
-      return <ColorTimer />
-    }
-
-    async function ColorTimer() {
-      await new Promise(r => setTimeout(r, 300))
-      const hue = Math.floor(Math.random() * 360)
-      return <Timer color={`hsl(${hue}, 70%, 85%)`} />
-    }
-      `,
-      client: `
-    'use client'
-
-    import { useState, useEffect, useTransition, use } from 'react'
-
-    export function Timer({ color }) {
-      const [seconds, setSeconds] = useState(0)
-
-      useEffect(() => {
-        const id = setInterval(() => setSeconds(s => s + 1), 1000)
-        return () => clearInterval(id)
-      }, [])
-
-      return (
-        <div style={{
-          background: color,
-          padding: 24,
-          borderRadius: 8,
-          textAlign: 'center'
-        }}>
-          <p style={{ fontFamily: 'monospace', fontSize: 32, margin: 0 }}>{seconds}s</p>
-        </div>
-      )
-    }
-
-    export function Router({ initial, refreshAction }) {
-      const [contentPromise, setContentPromise] = useState(initial)
-      const [isPending, startTransition] = useTransition()
-      const content = use(contentPromise)
-
-      const refresh = () => {
-        startTransition(() => {
-          setContentPromise(refreshAction())
-        })
-      }
-
-      return (
-        <div style={{ opacity: isPending ? 0.6 : 1, transition: 'opacity 0.2s' }}>
-          {content}
-          <button onClick={refresh} disabled={isPending} style={{ marginTop: 12 }}>
-            {isPending ? 'Refreshing...' : 'Refresh'}
-          </button>
-        </div>
-      )
-    }
-      `
-    });
-  </script>
+      });
+    </script>
+  </body>
 </html>