VS Code on the Web
Multiple ways to work with Visual Studio Code online
In 2015 there was a new kid in town: Visual Studio Code (VS Code), of all things from … Microsoft. During this time, the Redmond-based company had finally jumped on the open source bandwagon and perhaps they saw that Adobe was doing some things right on the IDE market with Brackets (but also some things wrong) and you didn’t want to miss the chance to engage the open source community.
The speed with which VS Code passed other IDE’s in the developer favor was quite amazing, due to the fact that the source code was openly available on GitHub and the developers in Switzerland released a new version every damn month.
What was exciting for me was the question of how long it would take for someone to make this IDE based on web technology available online, i.e. in a browser. It took until 2021…
github.dev and Github Codespaces
In Juli 2021 GitHub announced the availability of github.dev and GitHub Codespaces. The main difference between these two solutions is that Codespaces runs the IDE within a container (VM) in the background, which enables you to run your project and … it is only available for paid plans.
The main purpose of github.dev is to serve as a call target of the so-called Magic Dot, an easy way to open any repository in an editor. I blogged about this capabilty a while ago, see GitHubs Magic Dot. Really amazing! Just press the
dot key on every repository and you can browse the code files.
Recently, in October 2021, Microsoft (who owns GitHub) announced another online VS Code called vscode.dev. It is practically the same IDE as github.dev, with one main difference: It is not bound to a GitHub repository, but is able to open any local project or even remote repositories from GitHub.
However, it also has the same limitation that you cannot run a project, because there is no VM running in the background. But it is a really neat online editor, which runs on mobile devices too and feels absolutely like a local installed VS Code.
Back in 2017 some developers from Kiel, Germany started a web-based platform called Gitpod for providing fully functional orchestrated developer environments in the web. Since at that time VS Code was not yet running in the browser, they started the project Eclipse Theia, which powers several online IDE’s until today, but switched to VS Code as the team around Erich Gamma announced remote development capabilities in late 2020.
Whats special about Gitpod is, that users are able to start a browser-based instance of the IDE just by adding the address of an GitHub repository as a parameter to the URL, like
https://gitpod.io#https://github.com/kristofzerbe/kiko.io. Gitpot then starts a container with the source code and shows up the IDE at a random URL like
This so called Workspaces can be stopped, resumed, shared and downloaded, because it is a container with everything in it you need to run. Really amazing!
Other Monaco-driven IDE’s
VS Code actually consists of two parts: the platform itself, called Code-OSS, and the code editor Monaco included in it, which is also available as a separate project and used by other web-based IDE’s, like the following…
What makes Stackblitz very comfortable is that it runs your frontend directly on their servers and gives it to you in a browser-like preview window via a random Url like
https://web-platform-ywqj4s.stackblitz.io, you can open up in a separate browser also.
CodeSandbox works similar to Stackblitz, but offers some more features, like deployment to Vercel, Netlify or GitHub Pages and a test runner.
Also, you have full control over the sandbox that runs the preview of your project and the ability to invite other developers or visitors to the project, which makes it perfect for online coding seminars e.g. classrooms.
You can interact with this article (applause, criticism, whatever) by mention it in one of your posts, which will be shown here as a Webmention, or by leaving a good old comment with your GitHub account.
No Webmentions yet...
In case your blog software can't send Webmentions, you can use this form to submit me a mention of this article...