stackblitz-core-workflow-a

name	stackblitz-core-workflow-a
description	Build a browser-based code editor with WebContainers: file tree, editor, terminal, and preview. Use when creating interactive coding environments, building educational tools, or embedding development environments in web apps. Trigger: "webcontainer IDE", "browser IDE", "stackblitz editor", "code playground".
allowed-tools	Read, Write, Edit, Bash(npm:*), Grep
version	1.5.0
license	MIT
author	Jeremy Longshore <[e-mail]>
tags	["saas","ide","webcontainers","stackblitz"]
compatibility	Designed for Claude Code

StackBlitz Core Workflow A: Browser IDE

Overview

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.

Instructions

Step 1: HTML Layout

<div id="app">
  <div id="file-tree"></div>
  <div id="editor"></div>
  <div id="terminal"></div>
  <iframe id="preview"></iframe>
</div>

Step 2: Boot and Mount Project

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

const files: FileSystemTree = {
  'package.json': {
    file: { contents: JSON.stringify({
      name: 'playground', type: 'module',
      scripts: { dev: 'vite' },
      dependencies: { :  },
    }) },
  },
  : {
    : { :  },
  },
  : { : {
    : { : { :  } },
  }},
};

 wc =  .();
 wc.(files);