WebContainers Browser Support
Last update: February 2023
TL;DR WebContainers are supported on desktop Chromium-based browsers out of the box, as well as on Safari 16.4 TP and Firefox, which both are in beta. If you have issues with supported browsers, check your browser configuration.
Note
There is a reported Chrome regression on Macbooks with M1 chip, which also affects the speed of some larger projects on WebContainers. Learn more about this issue in these bug reports: issue 1228686 and issue 1356099.
Web Platform requirements
StackBlitz requires some of the latest additions to the Web Platform to work correctly when running WebContainers-based projects. Most important among them are SharedArrayBuffer
and cross-origin isolation.
SharedArrayBuffer
s (SABs) allow simultaneous access to a chunk of memory from multiple different workers. This is a powerful feature that was disabled temporarily in light of potential security issues. Cross-origin isolation is the key to enabling SABs: by properly configuring some of the headers and controlling which resources are served to browsers, a site can be considered crossOriginIsolated
or, in other words, secure enough to use SABs. Both features are enabled in Chromium-based browsers (Chrome, Brave, Edge), Safari 16.4 TP, and Firefox.
However, for cross-origin isolation to work for our use case, you need to be able to embed arbitrary resources: to be able to write and test your web application seamlessly, regardless of which images or scripts you choose to include. For this to work, a new mode of cross-origin isolation that allows this is needed.
Unfortunately, this feature is only enabled in Chromium-based browsers. We are following current specifications and continuing our talks with browser implementors to bring support to other browsers as soon as possible.
You can read more about cross-origin isolation on our blog.
Runtime differences
Note that there might be minor differences in the behavior of WebContainers in browsers that are not based on Chromium. After all, WebContainers strive for maximum compatibility with Node.js, which itself is based on V8, Chromium's own JavaScript engine. Node.js very much relies on some specific features of V8, which are not part of the established JavaScript standards. Because of that, it is easier to achieve a higher degree of compatibility in a Chromium-based browser, which also runs on top of V8.
Chrome
WebContainers are fully supported in Chrome and most Chromium-based browsers including Brave, Edge, Vivaldi, and others.
However, if you enabled blocking third-party cookies in Chrome preferences, this may prevent WebContainers from working out of the box.
If you think you’re running into this issue, check out how to configure Chrome to run WebContainers.
Note
There is a reported Chrome regression on Macbooks with M1 chip, which also affects the speed of some larger projects on WebContainers. Learn more about this issue in these bug reports: issue 1228686 and issue 1356099.
Brave
Brave is a Chromium-based browser and supports WebContainers well but it ships with a more aggressive third-party blocking by default which tends to stop WebContainers from running.
Learn how to configure Brave to run WebContainers.
Firefox
We have alpha support for Firefox. Please try it and share feedback with us!
As mentioned above, Firefox does not fully support the required mode for cross-origin isolation, so you might encounter limitations when running a server in a preview window within the StackBlitz editor. Third-party assets might get blocked due to the limitations of cross-origin isolation policies. However, you can work around this by opening your server preview in a separate window.
In addition to this, there might be other runtime incompatibilities as detailed above.
Safari
Starting with Safari 16.4 TP, WebContainers are in beta for Safari.
Older versions of the browser are still lacking a few other features necessary for WebContainers to run, such as:
These cannot be pollyfilled.