feat: migrate sandboxes to WebContainer

next.config.js

@@ -19,6 +19,36 @@ const nextConfig = {
     scrollRestoration: true,
     reactCompiler: true,
   },
+  async headers() {
+    return [
+      {
+        source: '/(.*)',
+        headers: [
+          {
+            key: 'Cross-Origin-Embedder-Policy',
+            value: 'require-corp',
+          },
+          {
+            key: 'Cross-Origin-Opener-Policy',
+            value: 'same-origin',
+          },
+        ],
+      },
+      {
+        source: '/images/content/(.*)',
+        headers: [
+          {
+            key: 'Cross-Origin-Resource-Policy',
+            value: 'cross-origin',
+          },
+          {
+            key: 'Access-Control-Allow-Origin',
+            value: '*',
+          },
+        ],
+      },
+    ];
+  },
   async rewrites() {
     return {
       beforeFiles: [

package.json

@@ -6,8 +6,7 @@
   "scripts": {
     "analyze": "ANALYZE=true next build",
     "dev": "next-remote-watch ./src/content",
-    "prebuild:rsc": "node scripts/buildRscWorker.mjs",
-    "build": "node scripts/buildRscWorker.mjs && next build && node --experimental-modules ./scripts/downloadFonts.mjs",
+    "build": "next build && node --experimental-modules ./scripts/downloadFonts.mjs",
     "lint": "next lint && eslint \"src/content/**/*.md\"",
     "lint:fix": "next lint --fix && eslint \"src/content/**/*.md\" --fix",
     "format:source": "prettier --config .prettierrc --write \"{plugins,src}/**/*.{js,ts,jsx,tsx,css}\"",
@@ -27,11 +26,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.3",
     "body-scroll-lock": "^3.1.3",
     "classnames": "^2.2.6",
     "debounce": "^1.2.1",
@@ -77,7 +76,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",

src/components/Icon/IconBolt.tsx

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {memo} from 'react';
+import type {SVGProps} from 'react';
+
+export const IconBolt = memo<SVGProps<SVGSVGElement>>(function IconBolt(props) {
+  return (
+    <svg
+      aria-label="StackBlitz"
+      viewBox="0 0 32 32"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}>
+      <path d="M5.853 18.647h8.735L9.45 31l16.697-17.647h-8.735L22.55 1 5.853 18.647z" />
+    </svg>
+  );
+});

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';
@@ -26,10 +26,10 @@ import {useSandpackLint} from './useSandpackLint';
 
 export const CustomPreset = memo(function CustomPreset({
   providedFiles,
-  showOpenInCodeSandbox = true,
+  showOpenInStackBlitz = true,
 }: {
   providedFiles: Array<string>;
-  showOpenInCodeSandbox?: boolean;
+  showOpenInStackBlitz?: boolean;
 }) {
   const {lintErrors, lintExtensions} = useSandpackLint();
   const {sandpack} = useSandpack();
@@ -48,7 +48,7 @@ export const CustomPreset = memo(function CustomPreset({
       lintErrors={lintErrors}
       lintExtensions={lintExtensions}
       isExpandable={isExpandable}
-      showOpenInCodeSandbox={showOpenInCodeSandbox}
+      showOpenInStackBlitz={showOpenInStackBlitz}
     />
   );
 });
@@ -58,13 +58,13 @@ const SandboxShell = memo(function SandboxShell({
   lintErrors,
   lintExtensions,
   isExpandable,
-  showOpenInCodeSandbox,
+  showOpenInStackBlitz,
 }: {
   providedFiles: Array<string>;
   lintErrors: Array<any>;
   lintExtensions: Array<any>;
   isExpandable: boolean;
-  showOpenInCodeSandbox: boolean;
+  showOpenInStackBlitz: boolean;
 }) {
   const containerRef = useRef<HTMLDivElement>(null);
   const [isExpanded, setIsExpanded] = useState(false);
@@ -78,7 +78,7 @@ const SandboxShell = memo(function SandboxShell({
         }}>
         <NavigationBar
           providedFiles={providedFiles}
-          showOpenInCodeSandbox={showOpenInCodeSandbox}
+          showOpenInStackBlitz={showOpenInStackBlitz}
         />
         <SandpackLayout
           className={cn(

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

@@ -7,26 +7,19 @@
 
 import {useState} from 'react';
 
-import {
-  LoadingOverlayState,
-  OpenInCodeSandboxButton,
-  useSandpack,
-} from '@codesandbox/sandpack-react/unstyled';
+import {LoadingOverlayState, useSandpack} 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 +32,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 +56,7 @@ 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">
         <div className="sp-cube">
           <div className="sp-sides">
             <div className="top" />
@@ -89,7 +73,6 @@ export const LoadingOverlay = ({
 };
 
 const useLoadingOverlayState = (
-  clientId: string,
   dependenciesLoading: boolean,
   forceLoading: boolean
 ): LoadingOverlayState => {
@@ -100,9 +83,6 @@ const useLoadingOverlayState = (
     setState('LOADING');
   }
 
-  /**
-   * Sandpack listener
-   */
   const sandpackIdle = sandpack.status === 'idle';
   useEffect(() => {
     const unsubscribe = listen((message) => {
@@ -111,12 +91,12 @@ const useLoadingOverlayState = (
           return prev === 'LOADING' ? 'PRE_FADING' : 'HIDDEN';
         });
       }
-    }, clientId);
+    });
 
     return () => {
       unsubscribe();
     };
-  }, [listen, clientId, sandpackIdle]);
+  }, [listen, sandpackIdle]);
 
   /**
    * Fading transient state

src/components/MDX/Sandpack/NavigationBar.tsx

@@ -22,8 +22,8 @@ import {
   FileTabs,
   useSandpack,
   useSandpackNavigation,
-} from '@codesandbox/sandpack-react/unstyled';
-import {OpenInCodeSandboxButton} from './OpenInCodeSandboxButton';
+} from '@webcontainer/react';
+import {OpenInStackBlitzButton} from './OpenInStackBlitzButton';
 import {ReloadButton} from './ReloadButton';
 import {ClearButton} from './ClearButton';
 import {DownloadButton} from './DownloadButton';
@@ -50,20 +50,19 @@ const getFileName = (filePath: string): string => {
 
 export function NavigationBar({
   providedFiles,
-  showOpenInCodeSandbox = true,
+  showOpenInStackBlitz = true,
 }: {
   providedFiles: Array<string>;
-  showOpenInCodeSandbox?: boolean;
+  showOpenInStackBlitz?: boolean;
 }) {
   const {sandpack} = useSandpack();
   const containerRef = useRef<HTMLDivElement | null>(null);
   const tabsRef = useRef<HTMLDivElement | null>(null);
   // By default, show the dropdown because all tabs may not fit.
   // We don't know whether they'll fit or not until after hydration:
   const [showDropdown, setShowDropdown] = useState(true);
-  const {activeFile, setActiveFile, visibleFiles, clients} = sandpack;
-  const clientId = Object.keys(clients)[0];
-  const {refresh} = useSandpackNavigation(clientId);
+  const {activeFile, setActiveFile, visibleFiles} = sandpack;
+  const {refresh} = useSandpackNavigation();
   const isMultiFile = visibleFiles.length > 1;
   const hasJustToggledDropdown = useRef(false);
 
@@ -110,17 +109,9 @@ export function NavigationBar({
   }, [isMultiFile, onContainerResize]);
 
   const handleClear = () => {
-    /**
-     * resetAllFiles must come first, otherwise
-     * the previous content will appear for a second
-     * when the iframe loads.
-     *
-     * Plus, it should only prompt if there's any file changes
-     */
     if (sandpack.editorState === 'dirty' && confirm('Clear all your edits?')) {
       sandpack.resetAllFiles();
     }
-    refresh();
   };
 
   const handleReload = () => {
@@ -146,7 +137,6 @@ export function NavigationBar({
                   'w-[fit-content]',
                   showDropdown ? 'invisible' : ''
                 )}>
-                {/* @ts-ignore: the FileTabs type from '@codesandbox/sandpack-react/unstyled' is incompatible with JSX in React 19 */}
                 <FileTabs />
               </div>
               {/* @ts-ignore: the Listbox type from '@headlessui/react' is incompatible with JSX in React 19 */}
@@ -204,7 +194,7 @@ export function NavigationBar({
         <DownloadButton providedFiles={providedFiles} />
         <ReloadButton onReload={handleReload} />
         <ClearButton onClear={handleClear} />
-        {showOpenInCodeSandbox && <OpenInCodeSandboxButton />}
+        {showOpenInStackBlitz && <OpenInStackBlitzButton />}
         {activeFile.endsWith('.tsx') && (
           <OpenInTypeScriptPlaygroundButton
             content={sandpack.files[activeFile]?.code || ''}