Skip to main content

How to use Visual Studio Code in a web browser

Visual Studio Code
Visual Studio Code (Image credit: Windows Central)

One of the many strengths of making a software project open source is that its community can tinker, contribute or straight up fork it and make a custom version. Microsoft Visual Studio Code is an open-source code editor and it's one of the most popular apps of its kind on any platform.

But you're also not restricted to using it just in the form Microsoft offers for download, either, thanks to its open-source nature. You can, in fact, run a version of Visual Studio Code in your web browser, for free.

This isn't necessarily for everyone, but if you move across machines frequently, or even if you want to be able to do some impromptu coding from something like an iPad or even your smartphone, it's a good option to explore. You can just open it up and get to work wherever you are, without any need to configure your environment.

Running Visual Studio Code in the browser the easy way

Visual Studio Code

Source: Windows Central (Image credit: Source: Windows Central)

Microsoft has now launched an official browser version of Visual Studio Code that can be found at vscode.dev. It integrates with Github allowing easy access to code stored in Github repos right from your web browser.

This isn't the same full fat version of Visual Studio Code you would use on the desktop, but it does have extension support. Not all extensions can be installed, but you'll probably find a good amount that can, such as those which can help you better parse the language you're coding in. You don't have a terminal, though, right now, so while it's extremely handy to have, it's probably not going to be your main IDE just yet.

Visual Studio Code in the browser with StackBlitz

Source: Windows Central (Image credit: Source: Windows Central)

If you're looking for an easy way to use Visual Studio Code with no setup and that you can just hop into a browser and open, StackBlitz is a fine way to accomplish this. It's totally free to use and is based on Visual Studio Code. Simply connect it to your GitHub account to log in.

The user interface is immediately familiar and there are a number of templates pre-configured to help you start a new workspace with a single click. StackBlitz is targeted at web development, so there are languages not offered right now, but you can sign up for beta access to the fullstack version which will offer even more. Extension support is also absent from StackBlitz at this time.

But if you were thinking this is some half-baked solution, you'd be wrong. StackBlitz uses Progressive Web APIs to run a live dev server inside your browser, not only allowing for live previews of your work but also offline use. Working offline is a pretty killer feature for a browser-based code editor.

There's a lot to appreciate in StackBlitz so if it sounds like something you might be interested in, the documentation and GitHub repo is a good place to start.

Visual Studio Code in the browser using code-server

Source: code-server (Image credit: Source: code-server)

A more full-featured way to use Visual Studio Code from the browser is with code-server, or the Coder service built upon it. Coder isn't free, though there is a 60-day trial, and it isn't limited to Visual Studio Code, either. It's a service aimed at larger distributions and enterprise use, allowing remote deployment of development environments using the cloud.

However, code-server is free and available on GitHub to build your own remote deployment. Whether that's on your own local machine or a remote machine hosted by any number of cloud providers.

There is a bit of setup involved with code-server and the exact steps will vary depending on where you're installing it. And if you're installing on a remote server you will need to be at least a little familiar with Linux.

Fortunately, code-server has a full tutorial on getting going and there is no shortage of great guides online from sources like YouTube that can walk you through a number of different uses of code-server. It's incredibly flexible and once the initial work is done, you'll have a full version of Visual Studio Code on any machine.

Using Chrome Remote Desktop

Chrome Remote Desktop

Source: Windows Central (Image credit: Source: Windows Central)

There is also the fact you could just use Chrome Remote Desktop as a bit of a cheese to use Visual Studio Code in a browser from another machine. If it's a regular thing, one of the other two methods here will certainly be better, but if it's just occasional use you'll be fine.

Chrome Remote Desktop allows you to use Chrome, Edge, or dedicated mobile apps, to connect to your desktop PC even if you're not on the same network. The drawback, of course, is that you need to leave your desktop machine on all the time for it to work.

But hey, in a pinch, it's a quick and easy way to connect to your regular desktop environment. It's free, simple to set up and absolutely superb.

Richard Devine is an Editor at Windows Central. A former Project Manager and long-term tech addict, he joined Mobile Nations in 2011 and has been found on Android Central and iMore as well as Windows Central. Currently you'll find him covering all manner of PC hardware and gaming, and you can follow him on Twitter and Instagram.

5 Comments
  • Oh my God. This does more than raise a question. It erects a giant, shining altar in the sky upon which all can gaze and places a question upon it. That question is this: WHY?! Web
    Software
    Sucks
  • I disagree with that, we all need the web, we developers are connected to GitHub, meaning we need internet connection to request, clone, create a branch etc. Online text editors is not a new thing, by the way, GitHub is integrating VSCode to use it in the web, meaning an easier way to interact with repositories. There are fantastic web apps out there and they work just fine. Technology is evolving, we are living in a cloud world where connectivity is a plus and now with 5G the web technology is going to get even better.
  • None of the software you have in mind actually requires a browser which does nothing but provide cross-platform support at the expense of running a program within a program. We seem to have lost the utter illogic of that setup because we've gotten used to it (well, I haven't). Someday a new generation will come about that asks the question "Why?". Indeed, why? Why are browsers needed to run so much software? Why can't each application utilize the code that lets browsers operate cross-platform? The only answer I can think of was one that was coined by Ralph Waldo Emmerson over 150 years ago: A foolish consistency.
  • Depends on the software. Some does for sure. Other is awesome.
  • "Normal" Visual Studio Code basically already runs in a browser since it's an Electron app. You can bring up the dev console and everything. And it's considered small, fast, and lightweight compared to its non-web big brother, full Visual Studio. Just because something is web-based doesn't mean it's bad. Since VS Code is already using web technologies, using it in a web browser is remarkably similar to using the installed version. There are definitely some differences and deficiencies, like some changed keyboard shortcuts and the lack of a terminal as mentioned in the article. I use the installed version of VS Code virtually every day for my job and for personal use. Am I going to switch to the online version and never look at the installed version again? Heavens, no! But for some situations, like when I'm using someone else's computer and need an editor, or when I'm doing some kind of training or workshop and I want to make sure attendees have a consistent, reliable editor without having to worry about installing things on their computers, the online version of VS Code could be a great option.