stackblitz-core-workflow-a

Featured

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".

AI & Automation 2,359 stars 334 forks Updated today MIT

Install

View on GitHub

Quality Score: 99/100

Stars 20%
100
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# 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 ```html <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 ```typescript 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); ``` ### Step 3: File Tree with Live Updates ```typescript 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}${pat...

Details

Author
jeremylongshore
Repository
jeremylongshore/claude-code-plugins-plus-skills
Created
8 months ago
Last Updated
today
Language
Python
License
MIT

Integrates with

Anthropic · AI

Similar Skills

Semantically similar based on skill content — not just same category

AI & Automation Featured

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".

2,359 Updated today
jeremylongshore
AI & Automation Featured

stackblitz-local-dev-loop

Configure local development for WebContainer applications with hot reload and testing. Use when building browser-based IDEs, testing WebContainer file operations, or setting up development workflows for WebContainer projects. Trigger: "stackblitz dev setup", "webcontainer local", "test webcontainers locally".

2,359 Updated today
jeremylongshore
AI & Automation Featured

stackblitz-core-workflow-b

Embed StackBlitz projects and manage WebContainer snapshots for sharing. Use when embedding code playgrounds in docs, creating shareable examples, or building interactive tutorials with StackBlitz. Trigger: "embed stackblitz", "stackblitz embed", "stackblitz share project".

2,359 Updated today
jeremylongshore