This package helps you integrate WebContainers into your React application.
pnpm add react-webcontainers
WebContainers require SharedArrayBuffer, which, in turn, requires the website where they are running to be cross-origin isolated. Because of that, you'll need to set COOP/COEP headers:
Cross-Origin-Embedder-Policy: require-corp Cross-Origin-Opener-Policy: same-origin
To learn more about this topic and see how to do it, check Configuring Headers.
import WebContainerProvider from "react-webcontainers"; export default function Providers({ children }: { children: React.ReactNode }) { return <WebContainerProvider>{children}</WebContainerProvider>; }
import { useWebContainer } from "react-webcontainers"; export default function Page() { const webContainer = useWebContainer(); return ( <h1> {webContainer ? `WebContainer instance instantiated at ${webContainer.workdir}.` : "WebContainer instance still booting."} </h1> ); }