Supported Browsers

BuildInBrowser runs on the WebContainer API, which requires modern browsers with specific security features enabled. While support is broad, the experience varies between browsers.

---

🖥️ Desktop Browser Support

Chrome, Edge & Chromium Browsers

These browsers provide full, out-of-the-box support for WebContainers. However, be aware of specific settings:

• Third-party cookies: If you block third-party cookies in Chrome, WebContainers may fail to work.
• Brave Shields: Brave's default aggressive third-party blocking can prevent WebContainers from running. You'll need to add an exception for the site.
• Edge Security: Edge's "Enhance your security on the web" option set to "Strict" disables WebAssembly, which is required.

Firefox (Beta Support)

WebContainers are in beta on Firefox. Known limitations include:

• Private Browsing: Service Workers are not allowed, preventing web servers from running.
• Cross-origin Isolation: Firefox doesn't fully support the required mode, which may block third-party assets in preview frames. Opening the preview in a separate window is a workaround.
• JavaScript Engine Differences: Firefox uses SpiderMonkey while Node.js uses V8, which carries a small risk of execution differences.
• Enhanced Tracking Protection: Custom modes that block all cross-site cookies will interfere with required Service Workers.

Safari (Beta Support)

WebContainers are in beta on macOS, starting with Safari 16.4. Key points:

• Cross-origin Isolation: Safari doesn't fully support the required mode, which may block third-party assets in preview frames.
• JavaScript Engine Differences: Safari uses JavaScriptCore while Node.js uses V8, which carries a small risk of execution differences.
• No Support for Older Versions: Safari versions earlier than 16.4 lack necessary Web Platform features like Atomics.waitAsync and regular expression lookbehind, which cannot be polyfilled.

---

📱 Mobile Browser Support

Mobile support is beta on all platforms. The primary constraint is memory:

• Mobile browsers have stricter memory limits than desktop browsers.
• Large projects may run into memory limitations on mobile devices.
• For the best experience, we recommend using a desktop browser with more available memory.

---

🔒 Critical Technical Requirements

WebContainers require your browser to support SharedArrayBuffer, which in turn requires your website to be cross-origin isolated.

Security Headers (Configured Automatically)

All pages must be served with these security headers:

Without these headers, SharedArrayBuffer is unavailable and WebContainers cannot function.

HTTPS Requirement

Your page must be served over HTTPS in production. localhost is exempt during development, but this is mandatory once deployed.

---

⚙️ Troubleshooting Common Issues

If WebContainers aren't working, check the following:

1. Cross-Origin Isolation

Open your browser's developer console and run:

If this returns false, WebContainers won't function.

2. Cookie & Tracking Settings

Some browser privacy settings can interfere:

• Chrome: Ensure third-party cookies are not blocked.
• Brave: Add an exception for the site in Shields settings.
• Firefox: Avoid Private Browsing mode. Disable Enhanced Tracking Protection in "Custom" mode that blocks cross-site cookies.
• Edge: Set "Enhance your security on the web" to "Basic" or add an exception.

3. Chrome M1 Regression

There's a reported Chrome regression on Macbooks with M1 chips that can affect the speed of larger projects in WebContainers.

4. Service Workers

WebContainers require Service Workers. If your browser blocks them (e.g., Firefox Private Browsing), the application won't run.

---

📋 Quick Reference: Minimum Browser Versions

---

BuildInBrowser is powered by WebContainer technology, developed by StackBlitz and announced at Google I/O. For the best experience, we recommend using Chrome or another Chromium-based browser on desktop.