WebContainers for React

This package helps you integrate WebContainers into your React application.

Installation

pnpm add react-webcontainers

Usage

Enable Cross-Origin Isolation

WebContainers requireSharedArrayBuffer, 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-corpCross-Origin-Opener-Policy: same-origin

To learn more about this topic and see how to do it, check Configuring Headers.

Add WebContainersProvider to the root of your application

importWebContainerProviderfrom"react-webcontainers";exportdefaultfunctionProviders({ children }: {children: React.ReactNode}){return<WebContainerProvider>{children}</WebContainerProvider>;}

Use WebContainer

import{useWebContainer}from"react-webcontainers";exportdefaultfunctionPage(){constwebContainer=useWebContainer();return(<h1>{webContainer
? `WebContainer instance instantiated at ${webContainer.workdir}.`
: "WebContainer instance still booting."}</h1>);}