stackblitz-hello-world
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".
Best use case
stackblitz-hello-world is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
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".
Teams using stackblitz-hello-world should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/stackblitz-hello-world/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How stackblitz-hello-world Compares
| Feature / Agent | stackblitz-hello-world | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
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".
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
Related Guides
AI Agents for Coding
Browse AI agent skills for coding, debugging, testing, refactoring, code review, and developer workflows across Claude, Cursor, and Codex.
Best AI Skills for Claude
Explore the best AI skills for Claude and Claude Code across coding, research, workflow automation, documentation, and agent operations.
ChatGPT vs Claude for Agent Skills
Compare ChatGPT and Claude for AI agent skills across coding, writing, research, and reusable workflow execution.
SKILL.md Source
# 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
```typescript
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
```typescript
const wc = await WebContainer.boot();
await wc.mount(files);
console.log('Files mounted. Installing dependencies...');
```
### Step 3: Install Dependencies
```typescript
const installProcess = await wc.spawn('npm', ['install']);
// Stream install output
installProcess.output.pipeTo(new WritableStream({
write(data) { console.log(data); },
}));
const installCode = await installProcess.exit;
if (installCode !== 0) throw new Error(`npm install failed: exit ${installCode}`);
console.log('Dependencies installed.');
```
### Step 4: Start Dev Server
```typescript
const serverProcess = await wc.spawn('npm', ['start']);
serverProcess.output.pipeTo(new WritableStream({
write(data) { console.log(data); },
}));
// Listen for server-ready event
wc.on('server-ready', (port, url) => {
console.log(`Server ready at ${url} (port ${port})`);
// Display in iframe
document.querySelector('iframe')!.src = url;
});
```
## Output
```
added 57 packages in 3s
Dependencies installed.
Server running on port 3000
Server ready at https://xxx.webcontainer.io (port 3000)
```
## Error Handling
| Error | Cause | Solution |
|-------|-------|----------|
| `npm install` hangs | Large dependency tree | Use `--prefer-offline` or fewer deps |
| `server-ready` never fires | App not listening on a port | Ensure `app.listen()` is called |
| Port conflict | Another process on same port | Use a different port |
| `ENOENT` for file | File not in mount tree | Verify FileSystemTree structure |
## Resources
- [WebContainer Quickstart](https://webcontainers.io/guides/quickstart)
- [FileSystemTree API](https://webcontainers.io/api#filesystemtree)
- [WebContainer Tutorial](https://webcontainers.io/tutorial/2-setting-up-webcontainers)
## Next Steps
Proceed to `stackblitz-local-dev-loop` for development workflow setup.Related Skills
workhuman-hello-world
Workhuman hello world for employee recognition and rewards API. Use when integrating Workhuman Social Recognition, or building recognition workflows with HRIS systems. Trigger: "workhuman hello world".
wispr-hello-world
Wispr Flow hello world for voice-to-text API integration. Use when integrating Wispr Flow dictation, WebSocket streaming, or building voice-powered applications. Trigger: "wispr hello world".
windsurf-hello-world
Create your first Windsurf Cascade interaction and Supercomplete experience. Use when starting with Windsurf, testing your setup, or learning basic Cascade and Supercomplete workflows. Trigger with phrases like "windsurf hello world", "windsurf example", "windsurf quick start", "first windsurf project", "try windsurf".
webflow-hello-world
Create a minimal working Webflow Data API v2 example. Use when starting a new Webflow integration, testing your setup, or learning basic Webflow API patterns — list sites, read CMS collections, create items. Trigger with phrases like "webflow hello world", "webflow example", "webflow quick start", "simple webflow code", "first webflow API call".
vercel-hello-world
Create a minimal working Vercel deployment with a serverless API route. Use when starting a new Vercel project, testing your setup, or learning basic Vercel deployment and API route patterns. Trigger with phrases like "vercel hello world", "vercel example", "vercel quick start", "simple vercel project", "first vercel deploy".
veeva-hello-world
Veeva Vault hello world with REST API and VQL. Use when integrating with Veeva Vault for life sciences document management. Trigger: "veeva hello world".
vastai-hello-world
Rent your first GPU instance on Vast.ai and run a workload. Use when starting a new Vast.ai integration, testing your setup, or learning basic Vast.ai GPU rental patterns. Trigger with phrases like "vastai hello world", "vastai example", "vastai quick start", "rent first gpu", "vastai first instance".
twinmind-hello-world
Create your first TwinMind meeting transcription and AI summary. Use when starting with TwinMind, testing your setup, or learning basic transcription and summary patterns. Trigger with phrases like "twinmind hello world", "first twinmind meeting", "twinmind quick start", "test twinmind transcription".
together-hello-world
Run inference with Together AI -- chat completions, streaming, and model selection. Use when testing open-source models, comparing model performance, or learning the Together AI API. Trigger: "together hello world, together AI example, run llama".
techsmith-hello-world
Capture a screenshot with Snagit COM API and produce a Camtasia video. Use when automating screen captures, batch-processing recordings, or building documentation pipelines with TechSmith tools. Trigger: "techsmith hello world, snagit capture, camtasia render".
supabase-hello-world
Run your first Supabase query — insert a row and read it back. Use when starting a new Supabase project, verifying your connection works, or learning the basic insert-then-select pattern with @supabase/supabase-js. Trigger with phrases like "supabase hello world", "first supabase query", "supabase quick start", "test supabase connection", "supabase insert and select".
stackblitz-webhooks-events
WebContainer lifecycle events: server-ready, port changes, error handling. Use when working with WebContainers or StackBlitz SDK. Trigger: "webcontainer events".