WebContainers FAQ

What are WebContainers?

WebContainers are a technology by StackBlitz that runs a full Node.js environment inside your browser tab using WebAssembly and SharedArrayBuffer. When you use a frontend template in YaliCode (React, Vue, Svelte, etc.), your code runs locally in the browser with no server involved.

Which browsers support WebContainers?

Chrome and Edge work best. Firefox has partial support. Safari has limited support. WebContainers require SharedArrayBuffer, which needs cross-origin isolation headers (COOP and COEP). YaliCode sets these automatically on the editor page.

Why does the editor page reload differently?

The /editor route sends cross-origin isolation headers that other pages do not need. This means the editor is effectively in its own browsing context. Links between the editor and other pages may cause a full page reload instead of a client-side navigation. This is expected.

Can I use npm packages?

Yes. The WebContainer has a full npm client. When you change package.json, dependencies are automatically installed. You can also run npm install from the terminal.

Is there network access?

WebContainers can fetch from the internet (they run in your browser, so they have your browser network access). However, server-side Docker containers have network disabled for security. If you need network in a backend language, use the dependency installer which temporarily enables network for package installation.

Files are not syncing

The editor syncs changes to the WebContainer with a 300ms debounce. Changes from the WebContainer filesystem sync back to the editor every 3 seconds. If files seem out of sync, try saving (Ctrl+S) and waiting a few seconds.

Does it work offline?

After the initial load and npm install, WebContainer projects work without internet. You can continue editing and previewing. Server-side execution (Python, Go, etc.) always needs a connection since it runs on our servers.