If I had not seen it, I doubt I would have believed it. If you click this link you will open a StackBlitz workspace right in your browser. You will have VS Code with all sources that make up a web application (Vue 3 in this case) as well as its backend (Node). The application is running and you can see it in the same or a separate window.
You can further develop the application. Install new npm modules, finetune the build configuration, change the code. Through Hot Module Reload, changes are immediately reflected in the live running application.
You can save your changes, download the project, share your environment (definition), open anyone else’s web application from a single URL. Without installing anything.
StackBlitz runs on WebContainers – built in Web Assembly, a binary language supported by most major browsers. StackBlitz runs entirely inside your browser. You knew already that your browser is an incredibly powerful platform, an application server and virtual desktop combined. I would say that with StackBlitz your understanding of just how powerful is stretched a little further.
Through StackBlitz, any tutorial, workshop, blogarticle or StackTrace entry can be accompanied by a full fledged code example that can be edited, built, ran in the regular “software engineering” way (not CodePen/CDN-style) and still without ever leaving the browser.
Any GitHub repo can easily be opened in StackBlitz using this URL format:
https://stackblitz.com/github/<path to repository>
optionally followed by parameters file to indicate the file that should be loaded in the editor and terminal to indicate whether a terminal window should be visible. For example:
To open StackBlitz for my GitHub Repo https://github.com/lucasjellema/code-cafe-vue3-people-application , open file /src/App.vue in the editor and show the terminal.
StackBlitz projects can be shared – a shareable URL can be handed around, allowing anyone to load the exact same starting project in their local browser and start working on it. Note that these environments are not magically connected. For example:
After making a small change and saving that change, when I click Share I get the option to copy a URL that I can share.
This URL in this case is https://stackblitz.com/edit/github-6w8qww?file=src%2FApp.vue When you click on it, you will load a StackBlitz enviroment in your browser with my change in it. That change has not yet been committed and pushed to a repository (except for a StackBlitz server when I pressed Save). You can start working from that point. If you make and save changes, the project will fork (on StackBlitz servers) and you have your own copy and your own unique URL.
Note that at any time you can export the project from StackBlitz in a zip-file you can download to your local machine – basically transferring data from your browser’s local storage to your laptop’s hard drive.
Browser Support
WebContainers are supported in all recent desktop browsers (fully in Chrome and Chrome-based browsers, in beta in Firefox and Safari), and partially supported on Android browsers. Android: beta support for Chrome, Chromium-based browsers and Firefox. iOS and iPadOS: beta support for Safari since iOS 16.4. See https://developer.stackblitz.com/platform/webcontainers/browser-support for details.
Resources
StackBlitz documentation
WebContainers homepage
StackBlitz Homepage https://stackblitz.com/ – open a starter project in one of many front end technologies
