feat: migrate sandboxes to WebContainer

Author: SamVerschueren

next.config.js

@@ -19,6 +19,23 @@ const nextConfig = {
     scrollRestoration: true,
     reactCompiler: true,
   },
+  async headers() {
+    return [
+      {
+        source: '/(.*)',
+        headers: [
+          {
+            key: 'Cross-Origin-Embedder-Policy',
+            value: 'credentialless',
+          },
+          {
+            key: 'Cross-Origin-Opener-Policy',
+            value: 'same-origin',
+          },
+        ],
+      },
+    ];
+  },
   async rewrites() {
     return {
       beforeFiles: [

package.json

@@ -27,11 +27,11 @@
     "test:eslint-local-rules": "yarn --cwd eslint-local-rules test"
   },
   "dependencies": {
-    "@codesandbox/sandpack-react": "2.13.5",
     "@docsearch/css": "^3.8.3",
     "@docsearch/react": "^3.8.3",
     "@headlessui/react": "^1.7.0",
     "@radix-ui/react-context-menu": "^2.1.5",
+    "@webcontainer/react": "0.0.1",
     "body-scroll-lock": "^3.1.3",
     "classnames": "^2.2.6",
     "debounce": "^1.2.1",
@@ -77,7 +77,7 @@
     "eslint-plugin-local-rules": "link:eslint-local-rules",
     "eslint-plugin-react": "7.x",
     "eslint-plugin-react-compiler": "^19.0.0-beta-e552027-20250112",
-    "eslint-plugin-react-hooks": "^0.0.0-experimental-fabef7a6b-20221215",
+    "eslint-plugin-react-hooks": "^5.2.0",
     "fs-extra": "^9.0.1",
     "globby": "^11.0.1",
     "gray-matter": "^4.0.2",

scripts/rename-js-to-jsx.mjs

@@ -0,0 +1,219 @@
+#!/usr/bin/env node
+'use strict';
+
+import fs from 'fs';
+import path from 'path';
+import {parse} from '@babel/parser';
+import {fileURLToPath} from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const ROOT = path.resolve(__dirname, '..');
+const CONTENT_DIR = path.join(ROOT, 'src', 'content');
+const DRY_RUN = process.argv.includes('--dry-run');
+
+// ---------------------------------------------------------------------------
+// JSX detection via Babel AST
+// ---------------------------------------------------------------------------
+
+function containsJSX(code) {
+  try {
+    const ast = parse(code, {
+      sourceType: 'module',
+      plugins: ['jsx'],
+      errorRecovery: true,
+    });
+    return walkForJSX(ast);
+  } catch {
+    return /<[A-Z]|<>|<\/>/.test(code);
+  }
+}
+
+function walkForJSX(node, seen = new WeakSet()) {
+  if (!node || typeof node !== 'object' || seen.has(node)) return false;
+  seen.add(node);
+  if (node.type === 'JSXElement' || node.type === 'JSXFragment') return true;
+  for (const val of Object.values(node)) {
+    if (Array.isArray(val)) {
+      for (const item of val) {
+        if (item && typeof item === 'object' && walkForJSX(item, seen))
+          return true;
+      }
+    } else if (val && typeof val === 'object') {
+      if (walkForJSX(val, seen)) return true;
+    }
+  }
+  return false;
+}
+
+// ---------------------------------------------------------------------------
+// File discovery
+// ---------------------------------------------------------------------------
+
+function collectMDX(dir) {
+  const out = [];
+  for (const ent of fs.readdirSync(dir, {withFileTypes: true})) {
+    const full = path.join(dir, ent.name);
+    if (ent.isDirectory()) out.push(...collectMDX(full));
+    else if (/\.mdx?$/.test(ent.name)) out.push(full);
+  }
+  return out;
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function escapeRe(s) {
+  return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+// ---------------------------------------------------------------------------
+// Process one MDX file
+// ---------------------------------------------------------------------------
+
+function processFile(filePath) {
+  const src = fs.readFileSync(filePath, 'utf8');
+  if (!/<Sandpack|<SandpackRSC/.test(src)) return null;
+
+  const lines = src.split('\n');
+  let changed = false;
+  const renames = [];
+
+  // 1. Find Sandpack / SandpackRSC block ranges
+  const blocks = [];
+  let bStart = -1;
+  let bTag = null;
+  for (let i = 0; i < lines.length; i++) {
+    const t = lines[i].trim();
+    if (bStart === -1) {
+      const m = t.match(/^<(Sandpack|SandpackRSC)([\s>]|$)/);
+      if (m) {
+        bStart = i;
+        bTag = m[1];
+      }
+    } else if (t === `</${bTag}>`) {
+      blocks.push({start: bStart, end: i});
+      bStart = -1;
+      bTag = null;
+    }
+  }
+
+  // 2. Process each block
+  for (const block of blocks) {
+    // 2a. Parse code fences
+    const fences = [];
+    let inFence = false;
+    let fMeta = '',
+      fLang = '',
+      fMetaLine = -1,
+      fCodeStart = -1;
+
+    for (let i = block.start + 1; i < block.end; i++) {
+      if (!inFence) {
+        const m = lines[i].match(/^```(\w+)\s*(.*)$/);
+        if (m) {
+          inFence = true;
+          fMetaLine = i;
+          fLang = m[1];
+          fMeta = m[2].trim();
+          fCodeStart = i + 1;
+        }
+      } else if (lines[i].trim() === '```') {
+        fences.push({
+          metaLine: fMetaLine,
+          codeStart: fCodeStart,
+          codeEnd: i - 1,
+          lang: fLang,
+          meta: fMeta,
+        });
+        inFence = false;
+      }
+    }
+
+    // 2b. Identify .js files containing JSX → build rename map
+    const renameMap = new Map(); // basename.js → basename.jsx
+
+    for (const f of fences) {
+      if (f.lang !== 'js' && f.lang !== 'jsx') continue;
+
+      const tokens = f.meta
+        .split(/\s+/)
+        .filter((tok) => tok && !tok.startsWith('{'));
+      const jsName = tokens.find((tok) => tok.endsWith('.js'));
+      if (!jsName) continue;
+
+      const code =
+        f.codeStart <= f.codeEnd
+          ? lines.slice(f.codeStart, f.codeEnd + 1).join('\n')
+          : '';
+      if (!code.trim()) continue;
+
+      if (containsJSX(code)) {
+        const base = path.basename(jsName);
+        renameMap.set(base, base.replace(/\.js$/, '.jsx'));
+
+        const newName = jsName.replace(/\.js$/, '.jsx');
+        lines[f.metaLine] = lines[f.metaLine].replace(jsName, newName);
+        changed = true;
+        renames.push(`${jsName} → ${newName}`);
+      }
+    }
+
+    if (renameMap.size === 0) continue;
+
+    // 2c. Update imports referencing renamed files
+    for (const f of fences) {
+      if (f.lang !== 'js' && f.lang !== 'jsx') continue;
+
+      for (let i = f.codeStart; i <= f.codeEnd; i++) {
+        let line = lines[i];
+        for (const [oldBase, newBase] of renameMap) {
+          const re = new RegExp(
+            `(?<=/)${escapeRe(oldBase)}(?=['"])`,
+            'g'
+          );
+          const updated = line.replace(re, newBase);
+          if (updated !== line) {
+            line = updated;
+            changed = true;
+          }
+        }
+        lines[i] = line;
+      }
+    }
+  }
+
+  if (!changed) return null;
+
+  if (!DRY_RUN) {
+    fs.writeFileSync(filePath, lines.join('\n'), 'utf8');
+  }
+  return renames;
+}
+
+// ---------------------------------------------------------------------------
+// Main
+// ---------------------------------------------------------------------------
+
+console.log(
+  `${DRY_RUN ? '[DRY RUN] ' : ''}Scanning ${path.relative(ROOT, CONTENT_DIR)} …\n`
+);
+
+const files = collectMDX(CONTENT_DIR);
+let modCount = 0;
+let renameCount = 0;
+
+for (const f of files) {
+  const result = processFile(f);
+  if (result) {
+    modCount++;
+    renameCount += result.length;
+    console.log(path.relative(ROOT, f));
+    for (const r of result) console.log(`  ${r}`);
+  }
+}
+
+console.log(
+  `\n${DRY_RUN ? 'Would modify' : 'Modified'} ${modCount} file(s), ${renameCount} rename(s).`
+);

src/components/MDX/Sandpack/Console.tsx

@@ -12,11 +12,8 @@ import cn from 'classnames';
 import {useState, useRef, useEffect} from 'react';
 import {IconChevron} from 'components/Icon/IconChevron';
 
-import {
-  SandpackCodeViewer,
-  useSandpack,
-} from '@codesandbox/sandpack-react/unstyled';
-import type {SandpackMessageConsoleMethods} from '@codesandbox/sandpack-client';
+import {SandpackCodeViewer, useSandpack} from '@webcontainer/react';
+import type {SandpackMessageConsoleMethods} from '@webcontainer/react';
 
 const getType = (
   message: SandpackMessageConsoleMethods

src/components/MDX/Sandpack/CustomPreset.tsx

@@ -15,7 +15,7 @@ import {
   useActiveCode,
   SandpackCodeEditor,
   SandpackLayout,
-} from '@codesandbox/sandpack-react/unstyled';
+} from '@webcontainer/react';
 import cn from 'classnames';
 
 import {IconChevron} from 'components/Icon/IconChevron';

src/components/MDX/Sandpack/DownloadButton.tsx

@@ -10,7 +10,7 @@
  */
 
 import {useSyncExternalStore} from 'react';
-import {useSandpack} from '@codesandbox/sandpack-react/unstyled';
+import {useSandpack} from '@webcontainer/react';
 import {IconDownload} from '../../Icon/IconDownload';
 import {AppJSPath, StylesCSSPath, SUPPORTED_FILES} from './createFileMap';
 export interface DownloadButtonProps {}

src/components/MDX/Sandpack/LoadingOverlay.tsx

@@ -9,24 +9,21 @@ import {useState} from 'react';
 
 import {
   LoadingOverlayState,
-  OpenInCodeSandboxButton,
   useSandpack,
-} from '@codesandbox/sandpack-react/unstyled';
+  OpenInStackBlitzButton,
+} from '@webcontainer/react';
 import {useEffect} from 'react';
 
 const FADE_ANIMATION_DURATION = 200;
 
 export const LoadingOverlay = ({
-  clientId,
   dependenciesLoading,
   forceLoading,
 }: {
-  clientId: string;
   dependenciesLoading: boolean;
   forceLoading: boolean;
 } & React.HTMLAttributes<HTMLDivElement>): React.ReactNode | null => {
   const loadingOverlayState = useLoadingOverlayState(
-    clientId,
     dependenciesLoading,
     forceLoading
   );
@@ -39,18 +36,11 @@ export const LoadingOverlay = ({
     return (
       <div className="sp-overlay sp-error">
         <div className="sp-error-message">
-          Unable to establish connection with the sandpack bundler. Make sure
-          you are online or try again later. If the problem persists, please
-          report it via{' '}
+          Unable to start the sandbox. Make sure you are online or try again
+          later. If the problem persists, please submit an issue on{' '}
           <a
             className="sp-error-message"
-            href="mailto:hello@codesandbox.io?subject=Sandpack Timeout Error">
-            email
-          </a>{' '}
-          or submit an issue on{' '}
-          <a
-            className="sp-error-message"
-            href="https://github.com/codesandbox/sandpack/issues"
+            href="https://github.com/reactjs/react.dev/issues"
             rel="noreferrer noopener"
             target="_blank">
             GitHub.
@@ -70,9 +60,8 @@ export const LoadingOverlay = ({
         opacity: stillLoading ? 1 : 0,
         transition: `opacity ${FADE_ANIMATION_DURATION}ms ease-out`,
       }}>
-      <div className="sp-cube-wrapper" title="Open in CodeSandbox">
-        {/* @ts-ignore: the OpenInCodeSandboxButton type from '@codesandbox/sandpack-react/unstyled' is incompatible with JSX in React 19 */}
-        <OpenInCodeSandboxButton />
+      <div className="sp-cube-wrapper" title="Open in StackBlitz">
+        {/* <OpenInStackBlitzButton /> */}
         <div className="sp-cube">
           <div className="sp-sides">
             <div className="top" />
@@ -89,7 +78,6 @@ export const LoadingOverlay = ({
 };
 
 const useLoadingOverlayState = (
-  clientId: string,
   dependenciesLoading: boolean,
   forceLoading: boolean
 ): LoadingOverlayState => {
@@ -100,9 +88,6 @@ const useLoadingOverlayState = (
     setState('LOADING');
   }
 
-  /**
-   * Sandpack listener
-   */
   const sandpackIdle = sandpack.status === 'idle';
   useEffect(() => {
     const unsubscribe = listen((message) => {
@@ -111,12 +96,12 @@ const useLoadingOverlayState = (
           return prev === 'LOADING' ? 'PRE_FADING' : 'HIDDEN';
         });
       }
-    }, clientId);
+    });
 
     return () => {
       unsubscribe();
     };
-  }, [listen, clientId, sandpackIdle]);
+  }, [listen, sandpackIdle]);
 
   /**
    * Fading transient state