StackBlitz, whose WebContainer product enables a Node.js server to run in WebAssembly within the browser for development, has added alpha support for Firefox – alongside existing support for Chromium-based browsers – as well as a private preview of a headless API that enables a custom UI with a WebContainer behind the scenes.
Traditional web development means a PC with a web server, database, debugging tools, and a host of dependencies. This approach is still common, but can no longer be assumed. Development environments can now be containerised, either to run locally, or remotely.
Hybrid environments are common, for example with Visual Studio Code running locally but supported by remote components accessed over ssh (Secure Shell), so that the code and the build process runs on a remote machine. Platforms like GitPod and GitHub Codespaces take this further, with remote containers and code editing in the browser, enabling zero install development from anywhere.
StackBlitz WebContainers represent a return to development on the local machine, but with a difference: everything runs in the browser, including the web server and the build tools.
The project was first previewed at the Google I/O event just over a year ago, with support from Vercel’s Next.js as well as Google. The introductory post stated that the WebContainer approach is faster, better integrated with Chrome developer tools, and more secure because “all code execution happens inside the browser’s security sandbox.” WebContainers include a “virtualized TCP network stack that’s mapped to your browser’s ServerWorker API,” the team explained, giving even lower latency than a server on localhost.
In order to make WebContainers work for this though, Harris needed a new feature – a headless API. “We want to have more control over the user interface,” he said. “Wouldn’t it be great if we could take the underlying Webcontainer technology and use it headlessly inside our own page? That’s exactly what we did,” he said, introducing learn.svelte.dev as a tutorial.
“What’s happening is we’ve gone to the Vercel edge network, downloaded the app, and that has gone and downloaded Node, installed SvelteKit and its dependencies like Vite and esbuild, we’ve written our application to the file system and we’ve started a Vite dev server, and this normally happens in the space of a few seconds.
“I know of at least two other frameworks who have started working on something very similar. I would expect this to become the norm of how we learn full stack tools very soon,” he said.