stackblitz-hello-world

name	stackblitz-hello-world
description	Boot a WebContainer, mount files, install npm packages, and run a dev server in the browser. Use when learning WebContainers, building browser-based IDEs, or running Node.js without a backend server. Trigger: "stackblitz hello world", "webcontainer example", "run node in browser".
allowed-tools	Read, Write, Edit, Bash(npm:*), Bash(node:*)
version	1.5.0
license	MIT
author	Jeremy Longshore <[e-mail]>
tags	["saas","ide","webcontainers","stackblitz"]
compatibility	Designed for Claude Code

StackBlitz Hello World

Overview

Boot a WebContainer, mount a file system tree, install dependencies with npm, and start a dev server -- all running inside the browser tab. No backend server needed.

Prerequisites

• @webcontainer/api installed (see stackblitz-install-auth)
• Cross-origin isolation headers configured
• Modern browser (Chrome 90+, Firefox 90+, Safari 16.4+)

Instructions

Step 1: Define File System Tree

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

const files: FileSystemTree = {
  'package.json': {
    file: {
      contents: JSON.stringify({
        name: 'wc-hello',
        scripts: { start: 'node index.js', dev: 'nodemon index.js' },
        dependencies: { express: '^4.18.0' },
      }),
    },
  },
  'index.js': {
    file: {
      contents: `
const express = require('express');
const app = express();
app.get('/', (req, res) => res.send('Hello from WebContainer!'));
app.listen(3000, () => console.log('Server running on port 3000'));
      `.trim(),
    },
  },
  src: {
    directory: {
      'utils.js': { file: { contents: 'module.exports = { greet: (n) => "Hello " + n };' } },
    },
  },
};

Step 2: Boot and Mount

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

.();