# StackBlitz — Full-Stack Development in the Browser via WebContainers

> A browser-based IDE that runs Node.js natively in your browser using WebContainers, enabling instant full-stack development without cloud VMs.

## Install

Save the content below to `.claude/skills/` or append to your `CLAUDE.md`:

# StackBlitz — Full-Stack Development in the Browser via WebContainers

## Quick Use
```bash
# Open any GitHub repo instantly in the browser
# https://stackblitz.com/github/OWNER/REPO
# Use the sdk to embed a project
npm install @stackblitz/sdk
# Or use the one-click "Open in StackBlitz" badge in READMEs
```

## Introduction
StackBlitz runs Node.js directly in the browser using WebContainers, a WebAssembly-based OS that boots a full development environment in milliseconds. Unlike cloud-based IDEs, all computation happens locally in the browser tab with no remote server.

## What StackBlitz Does
- Runs Node.js, npm, and package managers entirely in the browser via WebAssembly
- Provides a VS Code-based editor with integrated terminal and live preview
- Boots full projects in under two seconds without any cloud VM
- Offers an SDK for embedding interactive code examples in docs and tutorials
- Supports frameworks like Next.js, Vite, Angular, and Astro out of the box

## Architecture Overview
WebContainers implement a POSIX-compatible OS layer in WebAssembly, running inside a browser Service Worker. This layer includes a virtual filesystem, process management, and networking. Node.js executes in this sandboxed environment, and HTTP requests are intercepted to render previews directly in an iframe.

## Self-Hosting & Configuration
- Access the hosted version at stackblitz.com (free tier available)
- StackBlitz Enterprise provides on-premise deployment for organizations
- Configure project setup via a `.stackblitzrc` file in your repository
- Use the JavaScript SDK to programmatically create and embed projects
- Integrate with CI documentation pipelines to generate live code examples

## Key Features
- Zero-latency boot: projects start in milliseconds, not minutes
- Fully offline-capable once loaded in the browser
- No cloud VM costs: all computation runs in the browser tab
- Built-in package manager support (npm, pnpm, yarn)
- Secure by design: code runs in the browser sandbox, not on a server

## Comparison with Similar Tools
- **CodeSandbox** — Cloud VM-based; supports Docker but requires server-side compute
- **Gitpod** — Full cloud IDE with terminal; heavier, needs remote server
- **Replit** — Cloud-hosted multipurpose IDE; server-dependent, higher latency
- **GitHub Codespaces** — Cloud dev environments; requires GitHub and Azure infrastructure
- **CodePen** — Frontend-only sandbox; no Node.js or backend support

## FAQ
**Q: Can StackBlitz run backend frameworks?**
A: Yes, Node.js frameworks like Express, Fastify, and Next.js API routes run fully in the browser via WebContainers.

**Q: Does it work offline?**
A: Yes. Once a project is loaded, you can continue working without an internet connection since all code runs locally.

**Q: What are the limitations of WebContainers?**
A: WebContainers support Node.js workloads. Native binary dependencies, Docker, and non-Node runtimes (Python, Go) are not supported.

**Q: Can I embed StackBlitz in my documentation?**
A: Yes. The SDK provides embed methods to create interactive code playgrounds in any web page.

## Sources
- https://github.com/stackblitz/core
- https://developer.stackblitz.com

---
Source: https://tokrepo.com/en/workflows/stackblitz-full-stack-development-browser-via-webcontainers-7cbd0a56
Author: AI Open Source