improve ux

src/client/embed.tsx

···
 import { EmbedApp } from "./ui/EmbedApp.tsx";
 
 const container = document.getElementById("embed-root")!;
-const root = createRoot(container);
+const root = createRoot(container!);
 root.render(<EmbedApp />);

src/client/index.tsx

···
 import { createRoot } from "react-dom/client";
 import { App } from "./ui/App.tsx";
 
-document.addEventListener("DOMContentLoaded", () => {
-  const container = document.getElementById("app");
-  if (!container) {
-    throw new Error("Could not find #app element");
-  }
-  const root = createRoot(container);
-  root.render(<App />);
-});
+const container = document.getElementById("app");
+const root = createRoot(container!);
+root.render(<App />);

src/client/ui/App.css

···
   border-color: #555;
 }
 
+.App-embedModal-textarea::selection {
+  background: rgba(255, 213, 79, 0.3);
+  color: var(--text-bright);
+}
+
 .App-embedModal-tabs {
   display: inline-flex;
   background: var(--bg);

src/client/ui/App.tsx

···
-import React, { useState, useEffect, type ChangeEvent, type MouseEvent } from "react";
+import React, { useState, useEffect, useRef, type ChangeEvent, type MouseEvent } from "react";
 import { version } from "react";
 import { SAMPLES, type Sample } from "../samples.ts";
 import REACT_VERSIONS from "../../../scripts/versions.json";
···
 export function App(): React.ReactElement {
   const [initialCode] = useState(getInitialCode);
   const [currentSample, setCurrentSample] = useState<string | null>(initialCode.sampleKey);
-  const [workspaceCode, setWorkspaceCode] = useState<CodeState>({
+  const [liveCode, setLiveCode] = useState<CodeState>({
     server: initialCode.server,
     client: initialCode.client,
   });
-  const [liveCode, setLiveCode] = useState<CodeState>(workspaceCode);
   const [showEmbedModal, setShowEmbedModal] = useState(false);
+  const iframeRef = useRef<HTMLIFrameElement>(null);
 
-  // Listen for code changes from the embed iframe
+  const [initialEmbedUrl] = useState(
+    () => `embed.html?seamless=1&c=${encodeURIComponent(encodeCode(initialCode))}`,
+  );
+
   useEffect(() => {
     const handleMessage = (event: MessageEvent): void => {
       const data = event.data as { type?: string; code?: CodeState };
···
         setLiveCode(data.code);
       }
     };
-
     window.addEventListener("message", handleMessage);
     return () => window.removeEventListener("message", handleMessage);
   }, []);
 
-  // Reset liveCode when workspaceCode changes (e.g., sample switch)
   useEffect(() => {
-    setLiveCode(workspaceCode);
-  }, [workspaceCode]);
-
-  const embedUrl = `embed.html?c=${encodeURIComponent(encodeCode(workspaceCode))}`;
-
-  const handleSave = (): void => {
-    saveToUrl(liveCode.server, liveCode.client);
-    setCurrentSample(null);
-  };
-
-  const isDirty = currentSample
-    ? liveCode.server !== (SAMPLES[currentSample] as Sample).server ||
-      liveCode.client !== (SAMPLES[currentSample] as Sample).client
-    : liveCode.server !== initialCode.server || liveCode.client !== initialCode.client;
+    const handlePopState = (): void => {
+      const newCode = getInitialCode();
+      setLiveCode({ server: newCode.server, client: newCode.client });
+      setCurrentSample(newCode.sampleKey);
+      iframeRef.current?.contentWindow?.postMessage(
+        { type: "rscexplorer:reset", code: { server: newCode.server, client: newCode.client } },
+        "*",
+      );
+    };
+    window.addEventListener("popstate", handlePopState);
+    return () => window.removeEventListener("popstate", handlePopState);
+  }, []);
 
   const handleSampleChange = (e: ChangeEvent<HTMLSelectElement>): void => {
     const key = e.target.value;
···
         server: sample.server,
         client: sample.client,
       };
-      setWorkspaceCode(newCode);
       setCurrentSample(key);
+      setLiveCode(newCode);
+      iframeRef.current?.contentWindow?.postMessage(
+        { type: "rscexplorer:reset", code: newCode },
+        "*",
+      );
       const url = new URL(window.location.href);
       url.searchParams.delete("c");
       url.searchParams.set("s", key);
       window.history.pushState({}, "", url);
     }
   };
+
+  const handleSave = (): void => {
+    saveToUrl(liveCode.server, liveCode.client);
+    setCurrentSample(null);
+  };
+
+  const isDirty = currentSample
+    ? liveCode.server !== (SAMPLES[currentSample] as Sample).server ||
+      liveCode.client !== (SAMPLES[currentSample] as Sample).client
+    : liveCode.server !== initialCode.server || liveCode.client !== initialCode.client;
 
   return (
     <>
···
         </div>
         <BuildSwitcher />
       </header>
-      <iframe key={embedUrl} src={embedUrl} style={{ flex: 1, border: "none", width: "100%" }} />
+      <iframe
+        ref={iframeRef}
+        src={initialEmbedUrl}
+        style={{ flex: 1, border: "none", width: "100%" }}
+      />
       {showEmbedModal && <EmbedModal code={liveCode} onClose={() => setShowEmbedModal(false)} />}
     </>
   );

src/client/ui/CodeEditor.css

···
 .CodeEditor .cm-editor .cm-scroller {
   overflow: auto !important;
 }
+
+/* Fallback textarea styled to match CodeMirror */
+.CodeEditor-fallback {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  padding: 16px 18px;
+  margin: 0;
+  border: none;
+  outline: none;
+  resize: none;
+  background: transparent;
+  color: #b8b8b8;
+  font-family: "SF Mono", "Fira Code", Menlo, monospace;
+  font-size: 13px;
+  line-height: 1.6;
+  caret-color: #79b8ff;
+  white-space: pre;
+  overflow: auto;
+  tab-size: 4;
+  -moz-tab-size: 4;
+  word-wrap: normal;
+  overflow-wrap: normal;
+}

src/client/ui/CodeEditor.tsx

···
-import React, { useRef, useEffect, useEffectEvent, useState } from "react";
-import { EditorView, keymap } from "@codemirror/view";
-import { javascript } from "@codemirror/lang-javascript";
-import { syntaxHighlighting, HighlightStyle } from "@codemirror/language";
-import { tags } from "@lezer/highlight";
-import { history, historyKeymap, defaultKeymap } from "@codemirror/commands";
-import { closeBrackets, closeBracketsKeymap } from "@codemirror/autocomplete";
+import React, { useRef, useLayoutEffect, useEffectEvent, useState } from "react";
 import { Pane } from "./Pane.tsx";
 import "./CodeEditor.css";
 
-const highlightStyle = HighlightStyle.define([
-  { tag: tags.keyword, color: "#c678dd" },
-  { tag: tags.string, color: "#98c379" },
-  { tag: tags.number, color: "#d19a66" },
-  { tag: tags.comment, color: "#5c6370", fontStyle: "italic" },
-  { tag: tags.function(tags.variableName), color: "#61afef" },
-  { tag: tags.typeName, color: "#e5c07b" },
-  { tag: [tags.tagName, tags.angleBracket], color: "#e06c75" },
-  { tag: tags.attributeName, color: "#d19a66" },
-  { tag: tags.propertyName, color: "#abb2bf" },
-]);
-
-const minimalTheme = EditorView.theme(
-  {
-    "&": { height: "100%", fontSize: "13px", backgroundColor: "transparent" },
-    ".cm-scroller": {
-      overflow: "auto",
-      fontFamily: "'SF Mono', 'Fira Code', Menlo, monospace",
-      lineHeight: "1.6",
-      padding: "12px",
-    },
-    ".cm-content": { caretColor: "#79b8ff" },
-    ".cm-cursor": { borderLeftColor: "#79b8ff", borderLeftWidth: "2px" },
-    ".cm-selectionBackground, &.cm-focused .cm-selectionBackground": {
-      backgroundColor: "#3a3a3a",
-    },
-    ".cm-activeLine": { backgroundColor: "transparent" },
-    ".cm-gutters": { display: "none" },
-    ".cm-line": { color: "#b8b8b8" },
-  },
-  { dark: true },
-);
+let cmModule: typeof import("./codemirror.ts") | null = null;
+const cmModulePromise = import("./codemirror.ts").then((mod) => {
+  cmModule = mod;
+  return mod;
+});
 
 type CodeEditorProps = {
   defaultValue: string;
···
 
 export function CodeEditor({ defaultValue, onChange, label }: CodeEditorProps): React.ReactElement {
   const [initialDefaultValue] = useState(defaultValue);
+  const [cmLoaded, setCmLoaded] = useState(cmModule !== null);
   const containerRef = useRef<HTMLDivElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
 
   const onEditorChange = useEffectEvent((doc: string) => {
     onChange(doc);
   });
 
-  useEffect(() => {
-    if (!containerRef.current) return;
+  useLayoutEffect(() => {
+    let editorHandle: { destroy: () => void } | null = null;
+    let destroyed = false;
 
-    const onChangeExtension = EditorView.updateListener.of((update) => {
-      if (update.docChanged) {
-        onEditorChange(update.state.doc.toString());
+    function initEditor(cm: typeof import("./codemirror.ts")) {
+      if (!destroyed) {
+        editorHandle = cm.createEditor(
+          containerRef.current!,
+          textareaRef.current?.value ?? initialDefaultValue,
+          onEditorChange,
+        );
+        setCmLoaded(true);
       }
-    });
+    }
 
-    const editor = new EditorView({
-      doc: initialDefaultValue,
-      extensions: [
-        minimalTheme,
-        syntaxHighlighting(highlightStyle),
-        javascript({ jsx: true }),
-        history(),
-        closeBrackets(),
-        keymap.of([...defaultKeymap, ...historyKeymap, ...closeBracketsKeymap]),
-        onChangeExtension,
-      ],
-      parent: containerRef.current,
-    });
+    if (cmModule) {
+      initEditor(cmModule);
+    } else {
+      cmModulePromise.then(initEditor);
+    }
 
-    return () => editor.destroy();
+    return () => {
+      destroyed = true;
+      editorHandle?.destroy();
+    };
   }, [initialDefaultValue]);
 
   return (
     <Pane label={label}>
-      <div className="CodeEditor" ref={containerRef} />
+      <div className="CodeEditor" ref={containerRef}>
+        {!cmLoaded && (
+          <textarea
+            ref={textareaRef}
+            className="CodeEditor-fallback"
+            defaultValue={initialDefaultValue}
+            onChange={(e) => onChange(e.target.value)}
+            spellCheck={false}
+            autoCapitalize="off"
+            autoCorrect="off"
+          />
+        )}
+      </div>
     </Pane>
   );
 }

src/client/ui/EmbedApp.tsx

···
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { SAMPLES } from "../samples.ts";
 import { Workspace } from "./Workspace.tsx";
 import "./EmbedApp.css";
···
   client: string;
 };
 
-function getCodeFromUrl(): CodeState {
+function getParamsFromUrl(): { code: CodeState; seamless: boolean } {
   const params = new URLSearchParams(window.location.search);
   const encoded = params.get("c");
+  const seamless = params.get("seamless") === "1";
 
+  let code: CodeState;
   if (encoded) {
     try {
       const json = decodeURIComponent(escape(atob(encoded)));
       const parsed = JSON.parse(json) as { server?: string; client?: string };
-      return {
+      code = {
         server: (parsed.server ?? DEFAULT_SAMPLE.server).trim(),
         client: (parsed.client ?? DEFAULT_SAMPLE.client).trim(),
       };
     } catch {
-      // Fall through to defaults
+      code = {
+        server: DEFAULT_SAMPLE.server,
+        client: DEFAULT_SAMPLE.client,
+      };
     }
+  } else {
+    code = {
+      server: DEFAULT_SAMPLE.server,
+      client: DEFAULT_SAMPLE.client,
+    };
   }
 
-  return {
-    server: DEFAULT_SAMPLE.server,
-    client: DEFAULT_SAMPLE.client,
-  };
+  return { code, seamless };
 }
 
 function getFullscreenUrl(code: CodeState): string {
···
 }
 
 export function EmbedApp(): React.ReactElement {
-  const initialCode = getCodeFromUrl();
+  const [params] = useState(getParamsFromUrl);
+  const [code, setCode] = useState(params.code);
+  const seamless = params.seamless;
+
+  // Listen for code updates from parent via postMessage
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent): void => {
+      const data = event.data as { type?: string; code?: CodeState };
+      if (data?.type === "rscexplorer:reset" && data.code) {
+        const newServer = data.code.server.trim();
+        const newClient = data.code.client.trim();
+        setCode((prev) => {
+          if (prev.server === newServer && prev.client === newClient) {
+            return prev;
+          }
+          return { server: newServer, client: newClient };
+        });
+      }
+    };
+
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, []);
 
   const handleCodeChange = (server: string, client: string): void => {
     if (window.parent !== window) {
···
 
   return (
     <>
-      <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"
+      {!seamless && (
+        <div className="EmbedApp-header">
+          <span className="EmbedApp-title">RSC Explorer</span>
+          <a
+            href={getFullscreenUrl(code)}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="EmbedApp-fullscreenLink"
+            title="Open in RSC Explorer"
           >
-            <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3" />
-          </svg>
-        </a>
-      </div>
+            <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>
+      )}
       <Workspace
-        initialServerCode={initialCode.server}
-        initialClientCode={initialCode.client}
+        key={`${code.server}:${code.client}`}
+        initialServerCode={code.server}
+        initialClientCode={code.client}
         onCodeChange={handleCodeChange}
       />
     </>

src/client/ui/FlightLog.tsx

···
   if (entries.length === 0) {
     return (
       <div className="FlightLog-output">
-        <span className="FlightLog-empty FlightLog-empty--waiting">Compiling</span>
+        <span className="FlightLog-empty FlightLog-empty--waiting">Loading</span>
       </div>
     );
   }

src/client/ui/LivePreview.tsx

···
 
   let statusText = "";
   if (isLoading) {
-    statusText = "Compiling";
+    statusText = "Loading";
   } else if (isAtStart) {
     statusText = "Ready";
   } else if (isAtEnd) {
···
       </div>
       <div className="LivePreview-container">
         {isLoading ? (
-          <span className="LivePreview-empty">Compiling...</span>
+          <span className="LivePreview-empty">Loading...</span>
         ) : showPlaceholder ? (
           <span className="LivePreview-empty">{isAtStart ? "Step to begin..." : "Loading..."}</span>
         ) : flightPromise ? (

src/client/ui/Workspace.tsx

···
 
   useEffect(() => {
     const abort = new AbortController();
+    const timeoutId = setTimeout(() => {
+      setSession(null);
+    }, 1000);
     WorkspaceSession.create(serverCode, clientCode, abort.signal).then((nextSession) => {
       if (!abort.signal.aborted) {
+        clearTimeout(timeoutId);
         setSession(nextSession);
       }
     });
-    return () => abort.abort();
+    return () => {
+      clearTimeout(timeoutId);
+      abort.abort();
+    };
   }, [serverCode, clientCode, resetKey]);
 
   function handleServerChange(code: string) {
···
           {isLoading ? (
             <div className="Workspace-loadingOutput">
               <span className="Workspace-loadingEmpty Workspace-loadingEmpty--waiting">
-                Compiling
+                Loading
               </span>
             </div>
           ) : isError ? (

src/client/ui/codemirror.ts

···
+import { EditorView, keymap } from "@codemirror/view";
+import { javascript } from "@codemirror/lang-javascript";
+import { syntaxHighlighting, HighlightStyle } from "@codemirror/language";
+import { tags } from "@lezer/highlight";
+import { history, historyKeymap, defaultKeymap } from "@codemirror/commands";
+import { closeBrackets, closeBracketsKeymap } from "@codemirror/autocomplete";
+
+const highlightStyle = HighlightStyle.define([
+  { tag: tags.keyword, color: "#c678dd" },
+  { tag: tags.string, color: "#98c379" },
+  { tag: tags.number, color: "#d19a66" },
+  { tag: tags.comment, color: "#5c6370", fontStyle: "italic" },
+  { tag: tags.function(tags.variableName), color: "#61afef" },
+  { tag: tags.typeName, color: "#e5c07b" },
+  { tag: [tags.tagName, tags.angleBracket], color: "#e06c75" },
+  { tag: tags.attributeName, color: "#d19a66" },
+  { tag: tags.propertyName, color: "#abb2bf" },
+]);
+
+const minimalTheme = EditorView.theme(
+  {
+    "&": { height: "100%", fontSize: "13px", backgroundColor: "transparent" },
+    ".cm-scroller": {
+      overflow: "auto",
+      fontFamily: "'SF Mono', 'Fira Code', Menlo, monospace",
+      lineHeight: "1.6",
+      padding: "12px",
+    },
+    ".cm-content": { caretColor: "#79b8ff" },
+    ".cm-cursor": { borderLeftColor: "#79b8ff", borderLeftWidth: "2px" },
+    ".cm-selectionBackground, &.cm-focused .cm-selectionBackground": {
+      backgroundColor: "#3a3a3a",
+    },
+    ".cm-activeLine": { backgroundColor: "transparent" },
+    ".cm-gutters": { display: "none" },
+    ".cm-line": { color: "#b8b8b8" },
+  },
+  { dark: true },
+);
+
+export type EditorHandle = {
+  view: EditorView;
+  destroy: () => void;
+};
+
+export function createEditor(
+  container: HTMLElement,
+  doc: string,
+  onChange: (doc: string) => void,
+): EditorHandle {
+  const onChangeExtension = EditorView.updateListener.of((update) => {
+    if (update.docChanged) {
+      onChange(update.state.doc.toString());
+    }
+  });
+
+  const view = new EditorView({
+    doc,
+    extensions: [
+      minimalTheme,
+      syntaxHighlighting(highlightStyle),
+      javascript({ jsx: true }),
+      history(),
+      closeBrackets(),
+      keymap.of([...defaultKeymap, ...historyKeymap, ...closeBracketsKeymap]),
+      onChangeExtension,
+    ],
+    parent: container,
+  });
+
+  return {
+    view,
+    destroy: () => view.destroy(),
+  };
+}

src/embed.ts

···
 type EmbedOptions = {
   server: string;
   client: string;
+  seamless?: boolean;
 };
 
 type EmbedControl = {
···
  */
 export function mount(
   container: string | HTMLElement,
-  { server, client }: EmbedOptions,
+  { server, client, seamless }: EmbedOptions,
 ): EmbedControl {
   const el =
     typeof container === "string" ? document.querySelector<HTMLElement>(container) : container;
···
     throw new Error(`RSC Explorer: Container not found: ${container}`);
   }
 
+  const embedUrl = new URL(getEmbedUrl());
+  if (seamless) {
+    embedUrl.searchParams.set("seamless", "1");
+  }
+
   const iframe = document.createElement("iframe");
-  iframe.src = getEmbedUrl();
+  iframe.src = embedUrl.href;
   iframe.style.cssText =
     "width: 100%; height: 100%; border: 1px solid #e0e0e0; border-radius: 8px;";
 

vite.config.js

···
   };
 }
 
+function preloadCodemirrorPlugin() {
+  return {
+    name: "preload-codemirror",
+    transformIndexHtml(html, { bundle, filename }) {
+      if (!bundle) return; // dev mode
+      const tags = [];
+
+      const cmChunk = Object.keys(bundle).find((k) => k.includes("codemirror"));
+      if (cmChunk) {
+        tags.push({
+          tag: "link",
+          attrs: { rel: "modulepreload", href: "/" + cmChunk },
+          injectTo: "head",
+        });
+      }
+
+      // From index.html, prefetch embed resources for the iframe
+      if (filename.endsWith("index.html")) {
+        const embedChunk = Object.keys(bundle).find(
+          (k) => k.startsWith("assets/embed") && k.endsWith(".js"),
+        );
+        if (embedChunk) {
+          tags.push({
+            tag: "link",
+            attrs: { rel: "preload", href: "/" + embedChunk, as: "script", crossorigin: true },
+            injectTo: "head",
+          });
+        }
+      }
+
+      return tags;
+    },
+  };
+}
+
 export default defineConfig(({ mode }) => ({
-  plugins: [react(), rolldownWorkerPlugin(), serveEmbedPlugin()],
+  plugins: [react(), rolldownWorkerPlugin(), serveEmbedPlugin(), preloadCodemirrorPlugin()],
   server: { port: 3333 },
   define: {
     "process.env.NODE_ENV": JSON.stringify(mode === "development" ? "development" : "production"),