From stackblitz-pack
Installs WebContainer API and StackBlitz SDK for browser-based Node.js and project embedding. Configures COOP/COEP headers for Vite/Express servers.
npx claudepluginhub jeremylongshore/claude-code-plugins-plus-skills --plugin stackblitz-packThis skill is limited to using the following tools:
Set up the WebContainer API for running Node.js in the browser, or the StackBlitz SDK for embedding interactive code editors. WebContainers require no auth -- they run entirely client-side. The StackBlitz SDK is for embedding projects from stackblitz.com.
Boots WebContainer to mount files, install npm packages, and run Node.js dev servers in-browser. For WebContainers demos, browser IDEs, or serverless Node execution.
Provides official Vite guidance for setup, configuration, plugins, CLI, HMR API, SSR, backend integration, and deployment. Use for Vite project config or plugin needs.
Sets up VS Code .devcontainer with Docker, configurable Node/Bun base images, package managers (bun/npm/pnpm/yarn), ports, mounts, and Claude Code CLI support. Use for devcontainer setup requests.
Share bugs, ideas, or general feedback.
Set up the WebContainer API for running Node.js in the browser, or the StackBlitz SDK for embedding interactive code editors. WebContainers require no auth -- they run entirely client-side. The StackBlitz SDK is for embedding projects from stackblitz.com.
npm install @webcontainer/api
npm install @stackblitz/sdk
WebContainers require cross-origin isolation. Add these headers to your server:
// Express middleware
app.use((req, res, next) => {
res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp');
res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
next();
});
// Vite config
export default defineConfig({
server: {
headers: {
'Cross-Origin-Embedder-Policy': 'require-corp',
'Cross-Origin-Opener-Policy': 'same-origin',
},
},
});
import { WebContainer } from '@webcontainer/api';
const wc = await WebContainer.boot();
console.log('WebContainer booted successfully');
// Verify filesystem works
await wc.mount({ 'test.txt': { file: { contents: 'Hello WebContainers!' } } });
const content = await wc.fs.readFile('/test.txt', 'utf-8');
console.log(`File content: ${content}`);
WebContainer booted successfully
File content: Hello WebContainers!
| Error | Cause | Solution |
|---|---|---|
SharedArrayBuffer is not defined | Missing COOP/COEP headers | Add cross-origin isolation headers |
Failed to boot | Multiple instances | Only one WebContainer per page |
Not in secure context | HTTP instead of HTTPS | Use HTTPS or localhost |
Proceed to stackblitz-hello-world for your first WebContainer project.