--- # System prepended metadata title: WebContainers --- **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 No install. No setup. Just code.

Bolt.new

Lovable.dev

Note: 首先，我們先來看兩個實際的例子。不知道大家有沒有用過 Bolt.new 或 Lovable.dev，這兩個網站滿受歡迎的，尤其是對沒有程式背景、但想要開發網頁的人來說。稍微看一下介紹影片。他在說的就是，打開網站後不需要安裝、不需要設定，直接就能開始寫程式，幾分鐘內就能在瀏覽器裡run一個完整的 React 或是 Next.js 專案，看起來很像雲端 IDE，但它背後其實沒有server在運行。所有的事情，從建專案、安裝套件，到run dev——都直接在瀏覽器中完成。他們用到的技術就叫做 WebContainers，它讓瀏覽器不只是用來「看網頁」，而是變成一個可以「開發網頁」的環境。下一頁！ --- #### It looks like a Cloud IDE... but is it really?

Cloud IDEs like CodePen or StackBlitz

Browser-native IDEs like Bolt.new, Lovable.dev

Note: 這一頁要讓大家理解，雖然 Bolt、Lovable 這些網站看起來和以前的 CodePen、JSFiddle 很像，都是在瀏覽器裡寫程式、即時Preview，但本質上是完全不同的。左邊這些傳統的雲端 IDE，例如 CodePen，當我們在瀏覽器輸入程式、執行，code會被送到server上，雲端環境會負責打包、編譯，再把結果回傳給我們。也就是說，瀏覽器只是「顯示畫面」的介面，並沒有真正執行程式。右邊的 Bolt、Lovable 代表了新一代的「瀏覽器原生 IDE」。也就是說他們不需要server了。（切下一頁） ---

Note: browser本身就有 Node.js、檔案系統，也可以跑 npm install，所有事情都在本地完成！瀏覽器真的變成開發環境了。 --- #### WebContainers Node.js in your browser — powered by WebAssembly

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

Built by CodeSandbox — powering interactive coding in the browser

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 Different layers, same goal — running code directly in the browser

Aspect	WebContainers	Sandpack
Developed by	StackBlitz	CodeSandbox
Main Purpose	Run Node.js & dev servers fully inside the browser	Embed live, interactive code editors and previews
Core Technology	WebAssembly (WASM) + virtual file system + process emulation	React-based UI toolkit + Nodebox lightweight runtime
UI Layer	No built-in UI — must build your own	Includes ready-to-use editor + preview components
Use Case	Building full-featured, in-browser IDEs and developer tools e.g. Bolt.new, Lovable.dev	Embedding live code editors for docs, tutorials, and playgrounds e.g. React Docs, SvelteKit

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 Combining WebContainers' runtime and Sandpack's UI Note: 前面我們看到了兩條不同的路： WebContainers 負責提供瀏覽器內的 runtime 環境，而 Sandpack 則提供可以互動的 UI 框架。那如果我們把這兩個概念結合起來，自己動手做一個「可以在瀏覽器中即時運行的 IDE」會是什麼樣子呢？ --- #### Let’s See It in Action Stackpack Note: (demo) 接下來，我會demo一個叫 Stackpack 的專案它是仿照 Sandpack 的功能和體驗，自己實作一套類似的系統。主要是使用 React、TypeScript 和 WebContainers https://www.frontendhire.com/learn/frontend/courses/stackpack/overview --- #### Stackpack Architecture WASM logo

Note: Stackpack 的結構大致上是這樣：有三個主要介面：左邊是 Code Editor、下方是 Terminal、右邊是 Preview。這三個元件都透過下方的核心 WebContainers Runtime 連結在一起。當我在編輯器中修改程式、或在Terminal中執行 pnpm dev 時，這些操作都會直接進入 WebContainer 的虛擬環境中執行，最後即時更新在右邊的Preview。 --- #### Building Code Editor

Monaco Editor (VS Code core) — in-browser code editing
React + Vite template — preloaded project structure
FileTabs — multi-file editing & state control
Language detection — auto syntax & persistence

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 Bringing Node.js runtime into the browser

Install — @webcontainer/api
Boot the runtime — initialize WebContainer in App.tsx
Mount file system — load VITE_REACT_TEMPLATE as virtual files
Vite config setup — enable COEP & COOP headers for isolation

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 Xterm.js + WebContainers = interactive shell in the browser

Xterm.js — in-browser terminal emulator (used by VS Code)
Spawn shell — run webContainer.spawn('jsh') to start an interactive JavaScript shell
Stream I/O — connect shell.output → terminal.write & terminal.onData → shell.input

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

Preview Component — iframe renders live output inside the browser
WebContainer server — emits server-ready event with local URL
Dynamic update — editor writes to webContainer.fs to refresh preview

Note: 接下來是Preview。Preview 是用一個 iframe 來動態顯示 WebContainer 啟動的本地伺服器。當 container 發出 server-ready 事件時，就會拿到一個 URL，然後自動更新到 iframe 裡。這樣使用者只要在編輯器改完程式，Preview就會馬上更新。這樣子整個流程從編輯、執行、到預覽，全部都在同一個瀏覽器中完成。 --- #### Deploying to Production

vercel.json — define headers directly in deployment config
One-click deploy — push to GitHub → import to Vercel → deploy

Note: 最後是部署。剛剛有提到，WebContainers 需要正確的Header（COOP、COEP）才能運作，開發時可以在 Vite 設定，但正式環境要在 Vercel 或其他主機設定 vercel.json。部署方式也很簡單，只要推到 GitHub、連結到 Vercel，按一下就可以上線。 (切vercel.json) --- #### How It Changes the Way We Build From server-based dev to local-in-browser

Instant feedback — code runs instantly, no server round-trips
Zero setup — everything runs directly in the browser
Secure — no untrusted code runs on the backend
Cost-efficient — no backend infra or container costs
New possibilities — ideal for docs, tutorials, and AI IDEs

Note: 今天介紹的 WebContainers 和 Sandpack ，它們重新定義了前端開發的方式，從依賴伺服器的流程，轉變成在瀏覽器中直接運行與開發。總結一些優點: 第一個是即時性:所有程式都在使用者端執行，不需要等待伺服器打包或回傳結果，Run 一下馬上就能看到結果。第二個是零setup。不管是開發者、教學網站、或是 AI IDE，只要開瀏覽器就能運行整個開發環境。然後是比較安全還有成本低。因為程式都在 client 端跑，不會送到後端執行，也不用維護複雜的 sandbox 或 VM。那這些技術也開啟了新的應用場景，就像我們看到的技術文件、教學還有AI IDE。 --- #### Real-World Use Cases Who’s already building with WebContainers

StackBlitz / Codeflow — The original WebContainers IDE powering millions of developers monthly
Svelte & SvelteKit Tutorials — Official interactive lessons that run fully in the browser
Angular & Nuxt Learning Platforms — WebContainers-powered playgrounds for hands-on coding

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 Frontend is no longer just about UI — it’s about developer experiences

From interfaces → to environments
From interactions → to experiences
From users → to developers

Note: 最後總結一下，前端的定義其實不停在改變。過去我們的重心在畫面上，專注於做出漂亮流暢的 UIUX。但隨著像 WebContainer、Sandpack 這樣的技術出現，前端已經不只是「畫面」，而是「整個開發環境」。現在我們能直接在瀏覽器裡建立一個開發系統，有編輯器、有 terminal、有Preview。也就是說，我們正在從 interfaces 走向 environments，從做「畫面」到打造「環境」。體驗也不再只是點擊或動畫，而是整個「編輯、執行、預覽」串起來的完整流程，從 interactions 到 experiences。最後，前端的使用者也改變了，我們不只服務一般使用者，而是開始去設計「給開發者用的體驗」。