stackblitz-sdk-patterns

name	stackblitz-sdk-patterns
description	Production patterns for WebContainer API: file system operations, process management, and jsh shell. Use when building browser IDEs, managing WebContainer lifecycle, or implementing terminal emulation with jsh. Trigger: "webcontainer patterns", "stackblitz best practices", "webcontainer file system".
allowed-tools	Read, Write, Edit
version	1.5.0
license	MIT
author	Jeremy Longshore <[e-mail]>
tags	["saas","ide","webcontainers","stackblitz"]
compatibility	Designed for Claude Code

StackBlitz SDK Patterns

Overview

Production patterns for the WebContainer API: singleton boot, file system CRUD, process spawning and management, jsh interactive shell, and the StackBlitz SDK for embedding projects.

Instructions

Step 1: Singleton WebContainer Instance

import { WebContainer } from '@webcontainer/api';

let instance: WebContainer | null = null;

export async function getWebContainer(): Promise<WebContainer> {
  if (!instance) {
    instance = await WebContainer.boot();
  }
  return instance;
}

// Teardown
export async function teardownWebContainer() {
  if (instance) {
    instance.teardown();
    instance = null;
  }
}

Step 2: File System Operations

const wc = await getWebContainer();

// Write file
await wc.fs.writeFile('/src/app.ts', 'export const hello = "world";');

// Read file
const content = await wc.fs.readFile(, );


 entries =  wc..(, { :  });
entries.( {
  .();
});


 wc..(, { :  });


 wc..();


 wc..(, { :  });


wc..(, { :  },  {
  .();
});