From stackblitz-pack
Builds browser-based IDE with WebContainers: file tree, Monaco/CodeMirror editor, xterm.js terminal, and Vite preview iframe. Use for code playgrounds, educational tools, or embedded dev environments.
How this skill is triggered — by the user, by Claude, or both
Slash command
/stackblitz-pack:stackblitz-core-workflow-aThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Build a complete browser-based IDE using WebContainers: file explorer, code editor (Monaco/CodeMirror), integrated terminal (xterm.js + jsh), and live preview iframe. This is the architecture behind bolt.new.
Build a complete browser-based IDE using WebContainers: file explorer, code editor (Monaco/CodeMirror), integrated terminal (xterm.js + jsh), and live preview iframe. This is the architecture behind bolt.new.
<div id="app">
<div id="file-tree"></div>
<div id="editor"></div>
<div id="terminal"></div>
<iframe id="preview"></iframe>
</div>
import { WebContainer, FileSystemTree } from '@webcontainer/api';
const files: FileSystemTree = {
'package.json': {
file: { contents: JSON.stringify({
name: 'playground', type: 'module',
scripts: { dev: 'vite' },
dependencies: { vite: '^5.0.0' },
}) },
},
'index.html': {
file: { contents: '<!DOCTYPE html><html><body><div id="app"></div><script type="module" src="/src/main.js"></script></body></html>' },
},
src: { directory: {
'main.js': { file: { contents: 'document.getElementById("app").innerHTML = "<h1>Hello!</h1>";' } },
}},
};
const wc = await WebContainer.boot();
await wc.mount(files);
async function renderFileTree(path = '/') {
const entries = await wc.fs.readdir(path, { withFileTypes: true });
const tree = document.getElementById('file-tree')!;
for (const entry of entries) {
if (entry.name === 'node_modules') continue;
const fullPath = `${path}${path === '/' ? '' : '/'}${entry.name}`;
const el = document.createElement('div');
el.textContent = entry.isDirectory() ? `📁 ${entry.name}` : `📄 ${entry.name}`;
el.onclick = async () => {
if (!entry.isDirectory()) {
const content = await wc.fs.readFile(fullPath, 'utf-8');
editor.setValue(content); // Monaco editor
currentFile = fullPath;
}
};
tree.appendChild(el);
}
}
let currentFile = '/src/main.js';
// Monaco editor onChange
editor.onDidChangeModelContent(async () => {
const content = editor.getValue();
await wc.fs.writeFile(currentFile, content);
// Vite HMR will auto-reload the preview
});
// Terminal
const jsh = await wc.spawn('jsh', { terminal: { cols: 80, rows: 12 } });
jsh.output.pipeTo(new WritableStream({
write(data) { terminal.write(data); },
}));
// Install and start dev server
const install = await wc.spawn('npm', ['install']);
await install.exit;
await wc.spawn('npm', ['run', 'dev']);
// Preview iframe
wc.on('server-ready', (port, url) => {
document.getElementById('preview')!.src = url;
});
| Error | Cause | Solution |
|---|---|---|
| Preview blank | Server not ready yet | Wait for server-ready event |
| HMR not working | Vite not running | Check npm install succeeded |
| File tree empty | Mount failed | Verify FileSystemTree structure |
For embedding and sharing projects, see stackblitz-core-workflow-b.
npx claudepluginhub jeremylongshore/claude-code-plugins-plus-skills --plugin stackblitz-packImplements WebContainer API patterns for file system CRUD, process management, and jsh shell in browser IDEs using StackBlitz SDK.
Develops, previews, saves, deploys, and rollbacks CloudBase Vite-based React/Vue web apps in a vibe-coding session. Use when the user wants to build and iterate on a browser-rendered CloudBase project.
Configures Replit dev workflow: .replit run commands, hot reload for Node/Python/Vite, Webview ports, dev/prod DBs, Replit Agent.