<style>
.subtle-text {
color: #999;
font-size: 0.9em;
font-weight: 400;
letter-spacing: 0.3px;
}
.video-title {
font-weight: 400;
font-size: 0.7em;
color: #ccc;
margin-bottom: 8px;
text-align: center;
letter-spacing: 0.3px;
}
.media-row {
display: flex;
gap: 40px;
justify-content: center;
/* flex-wrap: wrap; */
}
.grad-title{
font-size:2.4em; font-weight:900;
background:linear-gradient(90deg,#60a5fa,#34d399,#fbbf24);
-webkit-background-clip:text; background-clip:text; color:transparent;
position:relative; display:inline-block;
}
.small-list { font-size: 0.8em; line-height: 1.4; }
.small-list b { color:#4db5ff; font-weight:600; }
.small-list code { color:#FF6347; font-weight:600; }
</style>
**How the Browser Became a Dev Environment — A Look into WebContainers and Sandpack**
Note:
這次要分享的主題雖然跟 AI 沒有直接關係，但發想其實是從之前大家報告的 AI Coding Assistants 開始的（像 Cursor、OpenHands、Copilot）。
在這些平台上，我發現有一個共通點：就是可以直接在瀏覽器中修改程式、執行命令、還有Preview。看起來就很像是在雲端裡面開了一個 VS Code，整個開發流程都搬進了瀏覽器。
所以說就很好奇這樣的體驗是到底是怎麼實作的？
那今天就帶大家看看這背後的兩個相關技術：WebContainers 和 Sandpack，WebContainers是怎麼樣讓瀏覽器變成一個開發環境。
---
#### When the Browser Becomes the Dev Environment
<span class="subtle-text">No install. No setup. Just code.</span>
<div class="media-row">
<div style="text-align:center;">
<p class="video-title">Bolt.new</p>
<iframe width="720" height="415"
src="https://www.youtube.com/embed/1MSVWUiNmxs"
title="Bolt.new"
frameborder="0" allowfullscreen>
</iframe>
</div>
<div style="text-align:center;">
<p class="video-title">Lovable.dev</p>
<iframe width="720" height="415"
src="https://www.youtube.com/embed/Hy5K6hYQ8NE"
title="Lovable.dev"
frameborder="0" allowfullscreen>
</iframe>
</div>
</div>
Note:
首先，我們先來看兩個實際的例子。
不知道大家有沒有用過 Bolt.new 或 Lovable.dev，這兩個網站滿受歡迎的，尤其是對沒有程式背景、但想要開發網頁的人來說。
稍微看一下介紹影片。
他在說的就是，打開網站後不需要安裝、不需要設定，直接就能開始寫程式，幾分鐘內就能在瀏覽器裡run一個完整的 React 或是 Next.js 專案，看起來很像雲端 IDE，但它背後其實沒有server在運行。
所有的事情，從建專案、安裝套件，到run dev——都直接在瀏覽器中完成。他們用到的技術就叫做 WebContainers，它讓瀏覽器不只是用來「看網頁」，而是變成一個可以「開發網頁」的環境。
下一頁！
---
#### It looks like a Cloud IDE... but is it really?
<div class="media-row">
<div style="text-align:center;">
<p class="video-title">
Cloud IDEs like CodePen or StackBlitz
</p>
<img src="https://raw.githubusercontent.com/fyjh21317/stackpack/7-customize/public/codepen.png"
width="600"
/>
</div>
<div style="text-align:center;">
<p class="video-title">
Browser-native IDEs like Bolt.new, Lovable.dev
</p>
<img src="https://i0.wp.com/blog.getbind.co/wp-content/uploads/2025/04/AD_4nXde8DkhWVgbjdegWFI-DL6V2duL63Vr8ZdYc1DH36TGys6M8c-R7fFNYxhhsTl6rHFl5c81w7rbAeSVBTRee8EVhJJ6IQ7bJ5b0N1w0ZU6liqHD8L9st0ULAysK0jbI6YizXWzNmA.png?resize=1200%2C540&ssl=1"
width="600"
/>
</div>
</div>
Note:
這一頁要讓大家理解，雖然 Bolt、Lovable 這些網站看起來和以前的 CodePen、JSFiddle 很像，都是在瀏覽器裡寫程式、即時Preview，但本質上是完全不同的。
左邊這些傳統的雲端 IDE，例如 CodePen，當我們在瀏覽器輸入程式、執行，code會被送到server上，雲端環境會負責打包、編譯，再把結果回傳給我們。也就是說，瀏覽器只是「顯示畫面」的介面，並沒有真正執行程式。
右邊的 Bolt、Lovable 代表了新一代的「瀏覽器原生 IDE」。也就是說他們不需要server了。（切下一頁）
---
<img
src="https://github.com/fyjh21317/stackpack/blob/7-customize/public/browser-local-sandbox.png?raw=true"
style="border-radius:12px;"
/>
Note:
browser本身就有 Node.js、檔案系統，也可以跑 npm install，所有事情都在本地完成！瀏覽器真的變成開發環境了。
---
#### WebContainers
<span class="subtle-text">Node.js in your browser — powered by WebAssembly</span>
<div class="media-row" style="align-items:center;">
<img
src="https://github.com/fyjh21317/stackpack/blob/7-customize/public/webcontainer-architecture-3.png?raw=true"
style="border-radius:8px;"
width="680"
/>
<div style="display:flex; flex-direction:column; align-items:center; gap:20px;">
<img
src="https://www.insightpartners.com/wp-content/uploads/2025/04/stackblitz_logo.png"
alt="StackBlitz Logo"
width="200"
style="object-fit:contain;"
/>
<img src="https://upload.wikimedia.org/wikipedia/commons/1/1f/WebAssembly_Logo.svg"
alt="WASM logo"
width="100"
style="object-fit:contain;"
/>
</div>
</div>
Note:
那這些瀏覽器原生 IDE，背後到底是怎麼做到的呢？答案就是我們的主角 WebContainers。
WebContainers 是由 StackBlitz 這間公司開發的，然後在 Google I/O 2021 (由Google舉行的網路開發者年會)第一次發表。
它最厲害的地方在於說，它不是模擬 Node.js，而是讓 Node.js 真的在瀏覽器中運行。
那這背後的技術是 WebAssembly（WASM）。
它提供了一個很安全又很快速的Sandbox環境，讓原本屬於OS層的程式碼在瀏覽器中可以執行。那 WebContainers 就是建構在這個基礎上，打造出一個完整的 Node.js 環境，裡面有自己的虛擬檔案系統、process還有 terminal。
簡單來說，WebAssembly 是引擎（讓原生程式能跑在瀏覽器），WebContainers 是作業系統（提供檔案、執行緒、IO 環境）。它們讓瀏覽器從「執行網頁」變成「可以開發網頁」的平台。
---
#### Sandpack
<p class="subtle-text">
Built by CodeSandbox — powering interactive coding in the browser
</p>
<div class="media-row">
<iframe
width="768" height="432"
src="https://www.youtube.com/embed/SOjotAjH5Yo?si=OJEL-g2OETp0UDC5"
title="Sandpack Introduction"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
style="border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,0.15);"
></iframe>
</div>
Note:
當我們提到「讓程式碼在瀏覽器中運行」這個領域，還有一個很重要的library：叫Sandpack。
先看下它的介紹影片。
它是由 CodeSandbox 團隊開發的開源框架，開發者可以用它在網站中嵌入一個可以即時編輯、即時預覽的code block。
Sandpack 它內建了很多前端開發會用到的功能，像是編輯器、即時Preview、hot reload、錯誤提示這些。
它的底層是用一個叫 Nodebox 的輕量 runtime 去模擬執行環境。
簡單來說，Sandpack 不是拿來「跑完整專案」的，而是用來「show一些程式碼片段」。像是 React 官方文件裡的範例，改幾行程式就能看到結果，這就是 Sandpack 的用途。
https://sandpack.codesandbox.io/
(有用到sandpack的案例)
https://codesandbox.io/blog/using-sandpack-for-react-libraries-documentation
---
#### WebContainers vs Sandpack
<span class="subtle-text" style="font-size: 0.7em;">
Different layers, same goal — running code directly in the browser
</span>
<table style="width:100%; border-collapse:collapse; margin-top:20px; font-size:0.5em;">
<thead style="color:#ccc; text-align:left; border-bottom:1px solid #444;">
<tr>
<th style="padding:8px 12px; width:35%;">Aspect</th>
<th style="padding:8px 12px; width:32%; color:#f5a623;">WebContainers</th>
<th style="padding:8px 12px; width:33%; color:#4db5ff;">Sandpack</th>
</tr>
</thead>
<tbody style="color:#ddd;">
<tr>
<td style="padding:8px 12px;">Developed by</td>
<td style="padding:8px 12px;">StackBlitz</td>
<td style="padding:8px 12px;">CodeSandbox</td>
</tr>
<tr>
<td style="padding:8px 12px;">Main Purpose</td>
<td style="padding:8px 12px;">Run Node.js & dev servers fully inside the browser</td>
<td style="padding:8px 12px;">Embed live, interactive code editors and previews</td>
</tr>
<tr>
<td style="padding:8px 12px;">Core Technology</td>
<td style="padding:8px 12px;">WebAssembly (WASM) + virtual file system + process emulation</td>
<td style="padding:8px 12px;">React-based UI toolkit + Nodebox lightweight runtime</td>
</tr>
<tr>
<td style="padding:8px 12px;">UI Layer</td>
<td style="padding:8px 12px;">No built-in UI — must build your own</td>
<td style="padding:8px 12px;">Includes ready-to-use editor + preview components</td>
</tr>
<tr>
<td style="padding:8px 12px;">Use Case</td>
<td style="padding:8px 12px;">
Building full-featured, in-browser IDEs and developer tools
<div style="font-size:0.85em; color:#999;">e.g. Bolt.new, Lovable.dev</div>
</td>
<td style="padding:8px 12px;">
Embedding live code editors for docs, tutorials, and playgrounds
<div style="font-size:0.85em; color:#999;">e.g. React Docs, SvelteKit</div>
</td>
</tr>
</tbody>
</table>
Note:
好，剛剛介紹了 WebContainers 和 Sandpack 這兩個技術，它們看起來很像，但其實定位完全不同。
首先，開發團隊不同：WebContainers 是由 StackBlitz 開發的技術，用來支撐他們整個線上 IDE；而 Sandpack 則是 CodeSandbox 團隊推出的開源方案，主要面向教學和互動文件。
再來看主要目的：WebContainers 想解決的是「如何讓整個開發環境都搬進瀏覽器」。它可以直接執行 Node.js、Vite、npm 等工具，因此非常適合打造像 Bolt.new 或 Lovable.dev 這樣的線上開發平台。
相對地，Sandpack 的出發點不是要提供完整開發環境，而是幫助文件或教學網站內嵌「可互動的程式碼範例」，更像是展示層而不是開發層。
核心技術部分：WebContainers 的底層使用 WebAssembly 來執行 Node.js，並模擬出虛擬檔案系統和 process 層；而 Sandpack 則是用 React 實作可重用的 UI 套件，搭配一個叫 Nodebox 的輕量 runtime 來模擬執行。
UI 層的差異也很明顯：WebContainers 本身沒有任何介面，它只提供 API；而 Sandpack 是幫你把編輯器、Preview畫面、錯誤提示都設計好了，一個是引擎，一個是框架。
最後看使用場景：WebContainers 比較適合打造全功能的 Browser IDE 或開發工具；而 Sandpack 則多用在互動式教學或文件。總
結來說，WebContainers 是 Runtime（底層運作環境），Sandpack 是 Playground（體驗層），兩者雖然定位不同，但都在推動同一個目標 —— 讓瀏覽器成為開發環境。
---
#### Bridging the Two
<span class="subtle-text">
Combining WebContainers' runtime and Sandpack's UI
</span>
Note:
前面我們看到了兩條不同的路：
WebContainers 負責提供瀏覽器內的 runtime 環境，
而 Sandpack 則提供可以互動的 UI 框架。
那如果我們把這兩個概念結合起來，
自己動手做一個「可以在瀏覽器中即時運行的 IDE」會是什麼樣子呢？
---
#### Let’s See It in Action
<span class="grad-title">Stackpack</span>
Note:
(demo)
接下來，我會demo一個叫 Stackpack 的專案
它是仿照 Sandpack 的功能和體驗，自己實作一套類似的系統。
主要是使用 React、TypeScript 和 WebContainers
https://www.frontendhire.com/learn/frontend/courses/stackpack/overview
---
#### Stackpack Architecture
<img src="https://github.com/fyjh21317/stackpack/blob/7-customize/public/stackpack-arch-2.png?raw=true"
alt="WASM logo"
style="border-radius:16px; box-shadow:0 4px 12px rgba(0,0,0,0.15);"
/>
Note:
Stackpack 的結構大致上是這樣：
有三個主要介面：左邊是 Code Editor、下方是 Terminal、右邊是 Preview。
這三個元件都透過下方的核心 WebContainers Runtime 連結在一起。
當我在編輯器中修改程式、或在Terminal中執行 pnpm dev 時，這些操作都會直接進入 WebContainer 的虛擬環境中執行，最後即時更新在右邊的Preview。
---
#### Building Code Editor
<ul class="small-list">
<li><b>Monaco Editor (VS Code core)</b> — in-browser code editing</li>
<li><b>React + Vite template</b> — preloaded project structure</li>
<li><b>FileTabs</b> — multi-file editing & state control</li>
<li><b>Language detection</b> — auto syntax & persistence</li>
</ul>
Note:
這個Code Editor的核心是 Monaco Editor，也就是 VS Code 用的編輯器引擎。
Editor的內容是用我自訂的 Vite React Template 物件，
(切vscode)
這個Template物件是去模擬一個小型 React 專案的檔案結構，
像是 App.tsx、index.html、vite.config.ts、package.json。
再搭配 FileTabs 元件去切換不同檔案，
然後依照副檔名去辨識語言
完成這些功能就能讓user在瀏覽器中切換、編輯多個檔案。
---
#### Integrating WebContainers
<span class="subtle-text">Bringing Node.js runtime into the browser</span>
<ul class="small-list">
<li><b>Install</b> — <code>@webcontainer/api</code></li>
<li><b>Boot the runtime</b> — initialize WebContainer in <code>App.tsx</code></li>
<li><b>Mount file system</b> — load <code>VITE_REACT_TEMPLATE</code> as virtual files</li>
<li><b>Vite config setup</b> — enable COEP & COOP headers for isolation</li>
</ul>
Note:
下一步，我們開始把 WebContainer 接進來。
它讓我們可以在瀏覽器中啟動一個完整的 Node.js runtime。
首先要安裝 @webcontainer/api，
然後在 App.tsx檔裡面用 WebContainer.boot() 去建立它的實例。
再把剛剛的 Vite React Template 小專案mount到WebContainer的虛擬檔案系統裡。
最後要在 Vite Config 裡加上 Cross-Origin-Embedder-Policy 和 Cross-Origin-Opener-Policy，確保 WASM 可以在獨立安全的Sandbox中執行。
完成後，瀏覽器就能啟動一個可以運作的 Node.js 環境。
---
#### Building Terminal
<span class="subtle-text">Xterm.js + WebContainers = interactive shell in the browser</span>
<ul class="small-list">
<li><b>Xterm.js</b> — in-browser terminal emulator (used by VS Code)</li>
<li><b>Spawn shell</b> — run <code>webContainer.spawn('jsh')</code> to start an interactive JavaScript shell</li>
<li><b>Stream I/O</b> — connect <code>shell.output → terminal.write</code> & <code>terminal.onData → shell.input</code></li>
</ul>
Note:
接下來是 terminal，要做一個terminal，我們可以用 Xterm.js 套件，vscode 內建的 Terminal 就是基於 Xterm 實作的哦。
接著透過 webContainer.spawn('jsh') 我們可以在 WebContainer 裡面啟動一個 JavaScript shell。
那為了讓shell能互動，還要把資料流IO串起來：
shell.output 負責把output顯示到 terminal 上，而 shell.input 則把使用者輸入的指令送回 shell。
這樣整個 terminal 就能像local環境一樣操作。
---
#### Building Preview
<ul class="small-list">
<li><b>Preview Component</b> — iframe renders live output inside the browser</li>
<li><b>WebContainer server</b> — emits <code>server-ready</code> event with local URL</li>
<li><b>Dynamic update</b> — editor writes to <code>webContainer.fs</code> to refresh preview</li>
</ul>
Note:
接下來是Preview。Preview 是用一個 iframe 來動態顯示 WebContainer 啟動的本地伺服器。當 container 發出 server-ready 事件時，就會拿到一個 URL，然後自動更新到 iframe 裡。這樣使用者只要在編輯器改完程式，Preview就會馬上更新。這樣子整個流程從編輯、執行、到預覽，全部都在同一個瀏覽器中完成。
---
#### Deploying to Production
<!-- TODO Link -->
<ul class="small-list">
<li><b>vercel.json</b> — define headers directly in deployment config</li>
<li><b>One-click deploy</b> — push to GitHub → import to Vercel → deploy</li>
</ul>
Note:
最後是部署。剛剛有提到，WebContainers 需要正確的Header（COOP、COEP）才能運作，開發時可以在 Vite 設定，但正式環境要在 Vercel 或其他主機設定 vercel.json。部署方式也很簡單，只要推到 GitHub、連結到 Vercel，按一下就可以上線。
(切vercel.json)
---
#### How It Changes the Way We Build
<span class="subtle-text">From server-based dev to local-in-browser</span>
<ul class="small-list">
<li><b>Instant feedback</b> — code runs instantly, no server round-trips</li>
<li><b>Zero setup</b> — everything runs directly in the browser</li>
<li><b>Secure</b> — no untrusted code runs on the backend</li>
<li><b>Cost-efficient</b> — no backend infra or container costs</li>
<li><b>New possibilities</b> — ideal for docs, tutorials, and AI IDEs</li>
</ul>
Note:
今天介紹的 WebContainers 和 Sandpack ，它們重新定義了前端開發的方式，從依賴伺服器的流程，轉變成在瀏覽器中直接運行與開發。
總結一些優點:
第一個是即時性:所有程式都在使用者端執行，不需要等待伺服器打包或回傳結果，Run 一下馬上就能看到結果。
第二個是 零setup。不管是開發者、教學網站、或是 AI IDE，只要開瀏覽器就能運行整個開發環境。
然後是 比較安全還有成本低。因為程式都在 client 端跑，不會送到後端執行，也不用維護複雜的 sandbox 或 VM。
那這些技術也開啟了新的應用場景，就像我們看到的技術文件、教學還有AI IDE。
---
#### Real-World Use Cases
<span class="subtle-text" style="font-size:0.7em;">Who’s already building with WebContainers</span>
<ul class="small-list">
<li><b>StackBlitz / Codeflow</b> — The original WebContainers IDE powering millions of developers monthly</li>
<li><b>Svelte & SvelteKit Tutorials</b> — Official interactive lessons that run fully in the browser</li>
<li><b>Angular & Nuxt Learning Platforms</b> — WebContainers-powered playgrounds for hands-on coding</li>
</ul>
Note:
接下來這些例子，就是已經在實際運用 WebContainers 的團隊。
第一個是 StackBlitz / Codeflow，也是WebContainers的原始開發者，Codeflow 是一個和 GitHub 整合的開發環境，讓開發者可以直接在瀏覽器裡打開、編輯、執行專案。
據他們官方統計，現在每個月有上百萬開發者都在他們的瀏覽器 IDE 裡寫程式。
github.com前面加pr.new
https://github.com/fyjh21317/stackpack
第二個是 Svelte & SvelteKit，他們的官方教學網站已經完全用 WebContainers 取代傳統的線上編譯環境。
https://svelte.dev/tutorial/svelte/welcome-to-svelte
第三個是 Angular 和 Nuxt，也都推出了基於 WebContainers 的互動教學平台，讓使用者能在頁面上直接修改、執行程式碼。
這些例子說明一件事: WebContainers這項技術不再只是實驗，而是已經被主流框架正式採用。
---
#### Frontend Is Evolving
<span class="subtle-text" style="font-size: 0.7em;">Frontend is no longer just about UI — it’s about developer experiences</span>
<ul class="small-list">
<li><b>From interfaces → to environments</b></li>
<li><b>From interactions → to experiences</b></li>
<li><b>From users → to developers</b></li>
</ul>
Note:
最後總結一下，
前端的定義其實不停在改變。
過去我們的重心在畫面上，專注於做出漂亮流暢的 UIUX。
但隨著像 WebContainer、Sandpack 這樣的技術出現，前端已經不只是「畫面」，而是「整個開發環境」。
現在我們能直接在瀏覽器裡建立一個開發系統，有編輯器、有 terminal、有Preview。
也就是說，我們正在從 interfaces 走向 environments，從做「畫面」到打造「環境」。體驗也不再只是點擊或動畫，而是整個「編輯、執行、預覽」串起來的完整流程，從 interactions 到 experiences。
最後，前端的使用者也改變了，我們不只服務一般使用者，而是開始去設計「給開發者用的體驗」。
{"title":"WebContainers","description":"When the Browser Becomes the Dev Environment","contributors":"[{\"id\":\"51950373-564e-404d-a29f-53cda9ba3499\",\"add\":29257,\"del\":14260,\"latestUpdatedAt\":1760678285560}]","slideOptions":"{\"slideOptions\":{\"spotlight\":{\"enabled\":true}}}"}