Spaces:

HuggingFaceDAO
/

webcontainer-preview

Running

App Files Files Community

HuggingFaceDAO commited on Sep 16, 2025

Commit

161411f

verified ·

1 Parent(s): 340ad13

Yes — you’re connecting two ideas:

Browse files

1. WebContainer API → run and preview code directly in the browser.

2. Spaces (like Hugging Face Spaces) → publish/share the project so others can use it.

That flow is totally logical:

---

🔄 Workflow: From Local Run → Published Space

<LinearProcessFlow steps={[ "⚡ Boot WebContainer runtime in the browser", "📂 Load project files into the container (FS API)", "📦 Install deps (npm / yarn / pnpm)", "▶️ Start dev/build server in-browser", "🌍 Save and publish to a Space on the Hub", "🖼️ Import and use Space directly in your UI" ]} />

---

✅ Why this works

WebContainer gives you a runtime (sandboxed Node.js) to build/preview your app.

Spaces give you persistence & hosting so your preview can be shared, reused, or embedded.

By publishing as a Space, you create a versioned, public (or private) endpoint. - Initial Deployment

Files changed (3) hide show

README.md +7 -5
index.html +395 -18
prompts.txt +378 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Webcontainer Preview
-emoji: 🌍
-colorFrom: gray
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: webcontainer-preview
+emoji: 🐳
+colorFrom: blue
+colorTo: pink
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,396 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>WebContainer Live Preview</title>
+  <link rel="icon" type="image/x-icon" href="data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E">
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+  <script src="https://unpkg.com/feather-icons"></script>
+  <style>
+    /* Custom scrollbar */
+    ::-webkit-scrollbar { width: 6px; height: 6px; }
+    ::-webkit-scrollbar-track { background: transparent; }
+    ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
+    ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
+    /* Animated pulse for live dot */
+    @keyframes pulse-dot {
+      0%,100%{transform:scale(1);opacity:1;}
+      50%{transform:scale(1.4);opacity:.8;}
+    }
+    .pulse-dot{animation:pulse-dot 1.5s infinite;}
+  </style>
+</head>
+<body class="bg-gray-50 text-gray-900 font-sans antialiased">
+  <!-- Header -->
+  <header class="sticky top-0 z-20 bg-white/80 backdrop-blur border-b border-gray-200">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="flex items-center justify-between h-14">
+        <div class="flex items-center gap-2">
+          <i data-feather="box" class="w-5 h-5 text-blue-600"></i>
+          <h1 class="text-lg font-semibold">WebContainer Preview</h1>
+        </div>
+        <div class="flex items-center gap-3">
+          <button id="publishBtn" class="hidden text-sm bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1.5 rounded-md transition items-center gap-2">
+            <i data-feather="upload-cloud" class="w-4 h-4"></i><span>Publish to Space</span>
+          </button>
+          <div class="flex items-center gap-2 text-sm text-gray-500">
+            <span id="status">Offline</span>
+            <span class="w-2 h-2 bg-gray-300 rounded-full" id="status-dot"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </header>
+  <!-- Main -->
+  <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+    <section class="grid grid-cols-1 md:grid-cols-6 lg:grid-cols-8 xl:grid-cols-9 gap-4">
+      <!-- Controls -->
+      <aside class="col-span-full md:col-span-6 lg:col-span-8 xl:col-span-3 flex flex-col gap-4" data-aos="fade-right">
+        <!-- Upload -->
+        <div class="bg-white rounded-xl border border-gray-200 p-4 shadow-sm">
+          <h2 class="text-sm font-semibold mb-3 flex items-center gap-2">
+            <i data-feather="upload" class="w-4 h-4 text-indigo-600"></i>Upload Project ZIP
+          </h2>
+          <label class="group relative flex flex-col items-center justify-center w-full h-28 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:border-indigo-400 hover:bg-indigo-50 transition">
+            <i data-feather="folder-plus" class="w-8 h-8 text-gray-400 group-hover:text-indigo-600"></i>
+            <span class="mt-2 text-sm text-gray-500 group-hover:text-indigo-600">Click or drop ZIP here</span>
+            <input id="zipInput" type="file" accept=".zip" class="absolute opacity-0 w-full h-full">
+          </label>
+          <p id="fileName" class="mt-2 text-xs text-gray-400 truncate"></p>
+        </div>
+        <!-- Actions -->
+        <div class="bg-white rounded-xl border border-gray-200 p-4 shadow-sm">
+          <h2 class="text-sm font-semibold mb-3 flex items-center gap-2">
+            <i data-feather="play" class="w-4 h-4 text-green-600"></i>Actions
+          </h2>
+          <div class="grid grid-cols-2 gap-2">
+            <button id="bootBtn" class="flex items-center justify-center gap-2 px-3 py-2 bg-green-600 hover:bg-green-700 text-white text-sm rounded-lg transition">
+              <i data-feather="zap"></i><span>Boot</span>
+            </button>
+            <button id="stopBtn" class="flex items-center justify-center gap-2 px-3 py-2 bg-gray-200 hover:bg-gray-300 text-gray-800 text-sm rounded-lg transition">
+              <i data-feather="square"></i><span>Stop</span>
+            </button>
+          </div>
+        </div>
+        <!-- Terminal -->
+        <div class="bg-gray-900 rounded-xl border border-gray-700 p-4 shadow-sm flex-1 flex flex-col">
+          <div class="flex items-center justify-between mb-2">
+            <h2 class="text-sm font-semibold text-gray-200 flex items-center gap-2">
+              <i data-feather="terminal" class="w-4 h-4 text-green-400"></i>Terminal
+            </h2>
+            <button id="clearTerm" class="text-xs text-gray-400 hover:text-white transition">
+              Clear
+            </button>
+          </div>
+          <pre id="terminal" class="flex-1 text-xs text-green-400 overflow-auto whitespace-pre-wrap"></pre>
+        </div>
+      </aside>
+      <!-- Preview -->
+      <div id="previewWrapper" class="col-span-full md:col-span-6 lg:col-span-8 xl:col-span-6 h-[calc(70vh-53px)] lg:h-[calc(100vh-54px)] bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden flex flex-col" data-aos="fade-left">
+        <!-- Preview Header -->
+        <div class="flex items-center justify-between px-4 py-2 bg-gray-50 border-b border-gray-200">
+          <div class="flex items-center gap-2">
+            <i data-feather="eye" class="w-4 h-4 text-gray-500"></i>
+            <span class="text-sm font-medium text-gray-700">Preview</span>
+            <span id="previewHost" class="text-xs text-gray-500 font-mono hidden"></span>
+          </div>
+          <div class="flex items-center gap-1">
+            <button id="refreshBtn" class="p-1.5 hover:bg-gray-200 rounded-md transition disabled:opacity-50" title="Refresh">
+              <i data-feather="refresh-cw" class="w-4 h-4 text-gray-600"></i>
+            </button>
+            <button id="openBtn" class="p-1.5 hover:bg-gray-200 rounded-md transition disabled:opacity-50" title="Open in new tab">
+              <i data-feather="external-link" class="w-4 h-4 text-gray-600"></i>
+            </button>
+            <button id="restartBtn" class="p-1.5 hover:bg-gray-200 rounded-md transition disabled:opacity-50" title="Restart container">
+              <i data-feather="rotate-ccw" class="w-4 h-4 text-gray-600"></i>
+            </button>
+          </div>
+        </div>
+        <!-- Preview Body -->
+        <div class="flex-1 relative">
+          <!-- Loading -->
+          <div id="loader" class="absolute inset-0 flex items-center justify-center bg-white z-10">
+            <div class="text-center">
+              <div class="w-8 h-8 border-2 border-gray-300 border-t-blue-600 rounded-full animate-spin mx-auto mb-3"></div>
+              <div class="text-sm text-gray-600 font-medium">Booting WebContainer…</div>
+              <div class="text-xs text-gray-400 mt-1">This may take a moment</div>
+            </div>
+          </div>
+          <!-- Error -->
+          <div id="error" class="absolute inset-0 hidden items-center justify-center bg-white z-10">
+            <div class="text-center max-w-md">
+              <div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                <i data-feather="alert-triangle" class="w-6 h-6 text-red-600"></i>
+              </div>
+              <h3 class="text-lg font-medium text-gray-900 mb-2">Container Error</h3>
+              <p id="errorText" class="text-sm text-red-600 mb-4"></p>
+              <button id="retryBtn" class="inline-flex items-center px-4 py-2 bg-red-600 hover:bg-red-700 text-white text-sm font-medium rounded-md transition">
+                <i data-feather="rotate-ccw" class="w-4 h-4 mr-2"></i>Restart Container
+              </button>
+            </div>
+          </div>
+          <!-- Iframe -->
+          <iframe id="preview" class="w-full h-full border-0" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>
+          <!-- Live indicator -->
+          <div id="liveIndicator" class="absolute bottom-2 left-2 hidden items-center gap-2 bg-green-50 border border-green-200 rounded-full px-2 py-1">
+            <span class="w-2 h-2 bg-green-500 rounded-full pulse-dot"></span>
+            <span class="text-xs text-green-700 font-medium">Live</span>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+  <script type="module">
+    /* ---------- Feather Icons ---------- */
+    feather.replace();
+    /* ---------- Elements ---------- */
+    const zipInput = document.getElementById('zipInput');
+    const fileName = document.getElementById('fileName');
+    const bootBtn = document.getElementById('bootBtn');
+    const stopBtn = document.getElementById('stopBtn');
+    const clearTerm = document.getElementById('clearTerm');
+    const terminal = document.getElementById('terminal');
+    const status = document.getElementById('status');
+    const statusDot = document.getElementById('status-dot');
+    const loader = document.getElementById('loader');
+    const error = document.getElementById('error');
+    const errorText = document.getElementById('errorText');
+    const retryBtn = document.getElementById('retryBtn');
+    const refreshBtn = document.getElementById('refreshBtn');
+    const openBtn = document.getElementById('openBtn');
+    const restartBtn = document.getElementById('restartBtn');
+    const preview = document.getElementById('preview');
+    const previewHost = document.getElementById('previewHost');
+    const liveIndicator = document.getElementById('liveIndicator');
+    const publishBtn = document.getElementById('publishBtn');
+    let webcontainer = null;
+    let url = '';
+    /* ---------- Util ---------- */
+    const log = (msg, type = 'info') => {
+      const stamp = `[${new Date().toLocaleTimeString()}]`;
+      const color = type === 'error' ? 'text-red-400' : type === 'warn' ? 'text-yellow-400' : 'text-green-400';
+      terminal.insertAdjacentHTML('beforeend', `<div><span class="${color}">${stamp}</span> ${msg}</div>`);
+      terminal.scrollTop = terminal.scrollHeight;
+    };
+    const setStatus = (state) => {
+      const labels = { offline: 'Offline', booting: 'Booting', online: 'Online', error: 'Error' };
+      const colors = {
+        offline: 'bg-gray-300',
+        booting: 'bg-yellow-400',
+        online: 'bg-green-500',
+        error: 'bg-red-500'
+      };
+      status.textContent = labels[state];
+      statusDot.className = `w-2 h-2 rounded-full ${colors[state]}`;
+    };
+    const showLoader = () => {
+      loader.classList.remove('hidden');
+      loader.classList.add('flex');
+      error.classList.add('hidden');
+      error.classList.remove('flex');
+    };
+    const hideLoader = () => {
+      loader.classList.add('hidden');
+      loader.classList.remove('flex');
+    };
+    const showError = (msg) => {
+      hideLoader();
+      errorText.textContent = msg;
+      error.classList.remove('hidden');
+      error.classList.add('flex');
+    };
+    const hideError = () => {
+      error.classList.add('hidden');
+      error.classList.remove('flex');
+    };
+    const setLive = (u) => {
+      url = u;
+      preview.src = url;
+      previewHost.textContent = new URL(url).host;
+      previewHost.classList.remove('hidden');
+      liveIndicator.classList.remove('hidden');
+      setStatus('online');
+      publishBtn.classList.remove('hidden');
+      publishBtn.classList.add('inline-flex');
+    };
+    /* ---------- File Input ---------- */
+    zipInput.addEventListener('change', (e) => {
+      const f = e.target.files[0];
+      if (f) fileName.textContent = f.name;
+    });
+    /* ---------- Terminal Clear ---------- */
+    clearTerm.addEventListener('click', () => terminal.innerHTML = '');
+    /* ---------- Boot ---------- */
+    bootBtn.addEventListener('click', async () => {
+      if (!zipInput.files.length) return alert('Please select a ZIP file');
+      showLoader();
+      hideError();
+      setStatus('booting');
+      log('Booting WebContainer…');
+      try {
+        const { WebContainer } = await import('@webcontainer/api');
+        webcontainer = await WebContainer.boot();
+        log('WebContainer booted');
+        const zip = zipInput.files[0];
+        const zipBuffer = await zip.arrayBuffer();
+        const zipArray = new Uint8Array(zipBuffer);
+        const unzip = (await import('unzipit')).unzip;
+        const { entries } = await unzip(zipArray);
+        const files = {};
+        for (const [path, entry] of Object.entries(entries)) {
+          if (!entry.isFile) continue;
+          const blob = await entry.blob();
+          files[path] = { file: { blob } };
+        }
+        await webcontainer.mount(files);
+        log('Files mounted');
+        // Default package.json
+        const defaultPackageJson = {
+          name: 'preview-app',
+          type: 'module',
+          scripts: { dev: 'vite', build: 'vite build', preview: 'vite preview' },
+          devDependencies: { vite: '^5.0.0' }
+        };
+        if (!files['package.json']) {
+          await webcontainer.fs.writeFile('package.json', JSON.stringify(defaultPackageJson, null, 2));
+        }
+        log('Installing dependencies…');
+        const install = await webcontainer.spawn('npm', ['install']);
+        await install.exit;
+        log('Dependencies installed');
+        log('Starting dev server…');
+        await webcontainer.spawn('npm', ['run', 'dev']);
+        webcontainer.on('server-ready', (port, u) => {
+          hideLoader();
+          setLive(u);
+          log(`Server ready at ${u}`);
+        });
+      } catch (err) {
+        log(err.message, 'error');
+        setStatus('error');
+        showError(err.message);
+      }
+    });
+    /* ---------- Stop ---------- */
+    stopBtn.addEventListener('click', async () => {
+      if (!webcontainer) return;
+      try {
+        await webcontainer.spawn('pkill', ['-f', 'node']);
+        webcontainer = null;
+        url = '';
+        preview.src = '';
+        previewHost.textContent = '';
+        previewHost.classList.add('hidden');
+        liveIndicator.classList.add('hidden');
+        setStatus('offline');
+        log('Container stopped');
+      } catch (e) {
+        log(e.message, 'error');
+      }
+    });
+    /* ---------- Refresh ---------- */
+    refreshBtn.addEventListener('click', () => {
+      if (!url) return;
+      preview.src = '';
+      setTimeout(() => preview.src = url, 100);
+      log('Preview refreshed');
+    });
+    /* ---------- Open in new tab ---------- */
+    openBtn.addEventListener('click', () => {
+      if (url) window.open(url, '_blank');
+    });
+    /* ---------- Restart container ---------- */
+    restartBtn.addEventListener('click', async () => {
+      if (!webcontainer) return;
+      showLoader();
+      try {
+        await webcontainer.spawn('pkill', ['-f', 'node']);
+        await bootBtn.click();
+      } catch (e) {
+        log(e.message, 'error');
+        showError(e.message);
+      }
+    });
+    /* ---------- Retry ---------- */
+    retryBtn.addEventListener('click', () => bootBtn.click());
+    /* ---------- Publish to Space ---------- */
+    publishBtn.addEventListener('click', async () => {
+      if (!url) return;
+      publishBtn.disabled = true;
+      publishBtn.innerHTML = '<i data-feather="loader" class="w-4 h-4 animate-spin mr-2"></i>Publishing…';
+      feather.replace();
+      try {
+        // Create project snapshot
+        const snapshot = {
+          name: 'webcontainer-preview',
+          files: {}, // Populate from mounted files if needed
+          url: url,
+          timestamp: new Date().toISOString()
+        };
+        // Export snapshot as JSON file
+        const blob = new Blob([JSON.stringify(snapshot, null, 2)], { type: 'application/json' });
+        const a = document.createElement('a');
+        a.href = URL.createObjectURL(blob);
+        a.download = 'space-export.json';
+        a.click();
+        // Provide instructions for Spaces upload
+        alert('Snapshot downloaded! Upload the JSON file to Hugging Face Spaces to publish your preview.');
+        log('Published snapshot for Spaces');
+      } catch (e) {
+        log(e.message, 'error');
+      } finally {
+        publishBtn.disabled = false;
+        publishBtn.innerHTML = '<i data-feather="upload-cloud" class="w-4 h-4 mr-2"></i>Publish to Space';
+        feather.replace();
+      }
+    });
+    /* ---------- Init status ---------- */
+    setStatus('offline');
+  </script>
+</body>
 </html>

prompts.txt ADDED Viewed

	@@ -0,0 +1,378 @@

+import classNames from "classnames";
+import { useRef, useEffect, useState, forwardRef } from "react";
+import { TbReload, TbLoader, TbExternalLink } from "react-icons/tb";
+import { WebContainer } from '@webcontainer/api';
+// PreviewEye icon component
+const PreviewEye = ({ className = "w-4 h-4" }: { className?: string }) => (
+  <svg
+    className={className}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={2}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+    <circle cx="12" cy="12" r="3" />
+  </svg>
+);
+// Tooltip component
+const Tooltip = ({
+  children,
+  content,
+  position = "top"
+}: {
+  children: React.ReactNode;
+  content: string;
+  position?: "top" | "bottom" | "left" | "right"
+}) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const positionClasses = {
+    top: "bottom-full left-1/2 transform -translate-x-1/2 mb-2",
+    bottom: "top-full left-1/2 transform -translate-x-1/2 mt-2",
+    left: "right-full top-1/2 transform -translate-y-1/2 mr-2",
+    right: "left-full top-1/2 transform -translate-y-1/2 ml-2"
+  };
+  return (
+    <div
+      className="relative inline-block"
+      onMouseEnter={() => setIsVisible(true)}
+      onMouseLeave={() => setIsVisible(false)}
+    >
+      {children}
+      {isVisible && (
+        <div className={classNames(
+          "absolute z-50 px-2 py-1 text-xs text-white bg-gray-900 rounded shadow-lg whitespace-nowrap pointer-events-none",
+          positionClasses[position]
+        )}>
+          {content}
+          <div className={classNames(
+            "absolute w-1 h-1 bg-gray-900 transform rotate-45",
+            position === "top" && "top-full left-1/2 -translate-x-1/2 -mt-0.5",
+            position === "bottom" && "bottom-full left-1/2 -translate-x-1/2 -mb-0.5",
+            position === "left" && "left-full top-1/2 -translate-y-1/2 -ml-0.5",
+            position === "right" && "right-full top-1/2 -translate-y-1/2 -mr-0.5"
+          )} />
+        </div>
+      )}
+    </div>
+  );
+};
+type PreviewProps = {
+  files: Record<string, any>;
+  isResizing: boolean;
+  isAiWorking: boolean;
+  packageJson?: any;
+  className?: string;
+};
+const Preview = forwardRef<HTMLDivElement, PreviewProps>(
+  ({ files, isResizing, isAiWorking, packageJson, className }, ref) => {
+    const iframeRef = useRef<HTMLIFrameElement | null>(null);
+    const [webcontainer, setWebcontainer] = useState<WebContainer | null>(null);
+    const [url, setUrl] = useState<string>('');
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState<string>('');
+    const [isFullscreen, setIsFullscreen] = useState(false);
+    // Initialize WebContainer
+    useEffect(() => {
+      const initWebContainer = async () => {
+        try {
+          const container = await WebContainer.boot();
+          setWebcontainer(container);
+        } catch (err) {
+          setError('Failed to initialize WebContainer');
+          console.error('WebContainer init error:', err);
+        }
+      };
+      initWebContainer();
+    }, []);
+    // Mount files and start dev server
+    useEffect(() => {
+      if (!webcontainer || !files) return;
+      const setupProject = async () => {
+        setIsLoading(true);
+        setError('');
+        try {
+          await webcontainer.mount(files);
+          const defaultPackageJson = {
+            name: 'preview-app',
+            type: 'module',
+            scripts: {
+              dev: 'vite',
+              build: 'vite build',
+              preview: 'vite preview'
+            },
+            devDependencies: {
+              vite: '^5.0.0'
+            },
+            ...packageJson
+          };
+          if (!files['package.json']) {
+            await webcontainer.fs.writeFile(
+              'package.json',
+              JSON.stringify(defaultPackageJson, null, 2)
+            );
+          }
+          const installProcess = await webcontainer.spawn('npm', ['install']);
+          const installExitCode = await installProcess.exit;
+          if (installExitCode !== 0) {
+            throw new Error('Failed to install dependencies');
+          }
+          const serverProcess = await webcontainer.spawn('npm', ['run', 'dev']);
+          webcontainer.on('server-ready', (port, url) => {
+            setUrl(url);
+            setIsLoading(false);
+          });
+          serverProcess.output.pipeTo(
+            new WritableStream({
+              write(data) {
+                console.log('[Server]', data);
+              },
+            })
+          );
+        } catch (err) {
+          setError(err instanceof Error ? err.message : 'Setup failed');
+          setIsLoading(false);
+          console.error('Setup error:', err);
+        }
+      };
+      setupProject();
+    }, [webcontainer, files, packageJson]);
+    const handleRefresh = async () => {
+      if (!webcontainer || !url) return;
+      setIsLoading(true);
+      try {
+        await webcontainer.spawn('npm', ['run', 'dev']);
+        if (iframeRef.current) {
+          const iframe = iframeRef.current;
+          iframe.src = '';
+          setTimeout(() => {
+            iframe.src = url;
+          }, 100);
+        }
+      } catch (err) {
+        console.error('Refresh error:', err);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    const handleRestartContainer = async () => {
+      if (!webcontainer) return;
+      setIsLoading(true);
+      setUrl('');
+      try {
+        await webcontainer.spawn('pkill', ['-f', 'node']);
+        await webcontainer.mount(files);
+        const serverProcess = await webcontainer.spawn('npm', ['run', 'dev']);
+        webcontainer.on('server-ready', (port, url) => {
+          setUrl(url);
+          setIsLoading(false);
+        });
+      } catch (err) {
+        setError('Failed to restart container');
+        setIsLoading(false);
+        console.error('Restart error:', err);
+      }
+    };
+    const openInNewTab = () => {
+      if (url) {
+        window.open(url, '_blank');
+      }
+    };
+    return (
+      <div
+        ref={ref}
+        className={classNames(
+          // Vercel-style grid system
+          "w-full relative",
+          // Base responsive grid
+          "col-span-full", // Full width on mobile
+          "md:col-span-6", // Half width on medium screens
+          "lg:col-span-8", // Larger portion on desktop
+          "xl:col-span-9", // Even larger on xl screens
+          // Height system
+          "h-[calc(70dvh-53px)]",
+          "lg:h-[calc(100dvh-54px)]",
+          // Borders and styling
+          "border border-gray-200",
+          "rounded-lg overflow-hidden",
+          "bg-white shadow-sm",
+          className
+        )}
+      >
+        {/* Header bar - Vercel style */}
+        <div className="flex items-center justify-between px-4 py-2 bg-gray-50 border-b border-gray-200">
+          <div className="flex items-center gap-2">
+            <PreviewEye className="w-4 h-4 text-gray-500" />
+            <span className="text-sm font-medium text-gray-700">Preview</span>
+            {url && (
+              <span className="text-xs text-gray-500 font-mono">
+                {new URL(url).host}
+              </span>
+            )}
+          </div>
+          <div className="flex items-center gap-1">
+            <Tooltip content="Refresh preview">
+              <button
+                className="p-1.5 hover:bg-gray-200 rounded-md transition-colors disabled:opacity-50"
+                onClick={handleRefresh}
+                disabled={!url || isLoading}
+              >
+                <TbReload
+                  className={classNames("w-4 h-4 text-gray-600", {
+                    "animate-spin": isLoading
+                  })}
+                />
+              </button>
+            </Tooltip>
+            <Tooltip content="Open in new tab">
+              <button
+                className="p-1.5 hover:bg-gray-200 rounded-md transition-colors disabled:opacity-50"
+                onClick={openInNewTab}
+                disabled={!url}
+              >
+                <TbExternalLink className="w-4 h-4 text-gray-600" />
+              </button>
+            </Tooltip>
+            <Tooltip content="Restart container">
+              <button
+                className="p-1.5 hover:bg-gray-200 rounded-md transition-colors disabled:opacity-50"
+                onClick={handleRestartContainer}
+                disabled={!webcontainer || isLoading}
+              >
+                <TbLoader
+                  className={classNames("w-4 h-4 text-gray-600", {
+                    "animate-spin": isLoading
+                  })}
+                />
+              </button>
+            </Tooltip>
+          </div>
+        </div>
+        {/* Content area */}
+        <div className="flex-1 relative h-[calc(100%-49px)]">
+          {error ? (
+            <div className="flex items-center justify-center h-full p-8">
+              <div className="text-center max-w-md">
+                <div className="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                  <svg className="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
+                  </svg>
+                </div>
+                <h3 className="text-lg font-medium text-gray-900 mb-2">
+                  Container Error
+                </h3>
+                <p className="text-sm text-red-600 mb-4">{error}</p>
+                <button
+                  onClick={handleRestartContainer}
+                  className="inline-flex items-center px-4 py-2 bg-red-600 hover:bg-red-700 text-white text-sm font-medium rounded-md transition-colors"
+                >
+                  <TbReload className="w-4 h-4 mr-2" />
+                  Restart Container
+                </button>
+              </div>
+            </div>
+          ) : !url || isLoading ? (
+            <div className="flex items-center justify-center h-full">
+              <div className="text-center">
+                <div className="w-8 h-8 border-2 border-gray-300 border-t-blue-600 rounded-full animate-spin mx-auto mb-4"></div>
+                <div className="text-sm text-gray-600 font-medium">
+                  {!webcontainer
+                    ? 'Booting WebContainer...'
+                    : 'Setting up project...'}
+                </div>
+                <div className="text-xs text-gray-400 mt-1">
+                  This may take a moment
+                </div>
+              </div>
+            </div>
+          ) : (
+            <iframe
+              ref={iframeRef}
+              title="WebContainer Preview"
+              src={url}
+              className={classNames("w-full h-full border-0", {
+                "pointer-events-none": isResizing || isAiWorking,
+              })}
+              sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+            />
+          )}
+        </div>
+        {/* Status indicator */}
+        {url && (
+          <div className="absolute bottom-2 left-2 flex items-center gap-2 bg-green-50 border border-green-200 rounded-full px-2 py-1">
+            <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
+            <span className="text-xs text-green-700 font-medium">Live</span>
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+Preview.displayName = "Preview";
+export default Preview;
+Yes — you’re connecting two ideas:
+1. WebContainer API → run and preview code directly in the browser.
+2. Spaces (like Hugging Face Spaces) → publish/share the project so others can use it.
+That flow is totally logical:
+---
+🔄 Workflow: From Local Run → Published Space
+<LinearProcessFlow steps={[ "⚡ Boot WebContainer runtime in the browser", "📂 Load project files into the container (FS API)", "📦 Install deps (npm / yarn / pnpm)", "▶️ Start dev/build server in-browser", "🌍 Save and publish to a Space on the Hub", "🖼️ Import and use Space directly in your UI" ]} />
+---
+✅ Why this works
+WebContainer gives you a runtime (sandboxed Node.js) to build/preview your app.
+Spaces give you persistence & hosting so your preview can be shared, reused, or embedded.
+By publishing as a Space, you create a versioned, public (or private) endpoint.