Visual Studio Code for the Web (2023)

Visual Studio Code for the Web provides a free, zero-install Microsoft Visual Studio Code experience running entirely in your browser, allowing you to quickly and safely browse source code repositories and make lightweight code changes. To get started, go to in your browser.

VS Code for the Web has many of the features of VS Code Desktop that you love, including search and syntax highlighting while browsing and editing, along with extension support to work on your codebase and make simpler edits. In addition to opening repositories, forks, and pull requests from source control providers like GitHub and Azure Repos (in preview), you can also work with code that is stored on your local machine.

VS Code for the Web runs entirely in your web browser, so there are certain limitations compared to the desktop experience, which you can read more about below.

Relationship to VS Code Desktop

VS Code for the Web provides a browser-based experience for navigating files and repositories and committing lightweight code changes. However, if you need access to a runtime to run, build, or debug your code, or you want to use platform features such as a terminal, we recommend moving your work to the desktop application or GitHub Codespaces for the full capabilities of VS Code. In addition, VS Code Desktop lets you run extensions that aren't supported in the web version, and use a full set of keyboard shortcuts not limited by your browser.

When you're ready to switch, you'll be able to "upgrade" to the full VS Code Desktop experience with a few clicks.

You can also switch between the Stable and Insiders versions of VS Code for the Web by selecting the gear icon, then Switch to Insiders Version..., or by navigating directly to

Opening a project

By navigating to, you can create a new local file or project, work on an existing local project, or access source code repositories hosted elsewhere, such as on GitHub and Azure Repos (part of Azure DevOps).

You can navigate to a project repository directly from a URL, following the scheme: Using the VS Code repo as an example, this would look like:

To work with both GitHub and Azure Repos, VS Code for the Web supports two routes, and


Azure Repos:

(Video) VS Code for the Web:

From your browser's search bar (aka omnibox), you can easily open any GitHub repository in Simply install the extension for Chrome and Edge. Then, type code to activate the omnibox, followed by your repository's name. Suggestions are populated by your browser search history, so if the repo you want doesn't come up, you can also type in the fully qualified <owner>/<repo> name to open it, for example microsoft/vscode.

Visual Studio Code for the Web (1)

If you're already in VS Code for the Web at, you can alternatively navigate to different repos via the GitHub Repositories extension commands. Select the remote indicator in the lower left of the Status bar, and you'll be presented with the Open Remote Repository... command.

Visual Studio Code for the Web (2)

GitHub Repositories is the core component that provides the ability to remotely browse and edit a repository from within the editor.

Rather than cloning your work, GitHub Repositories creates a virtual file system to access repositories and pull requests, allowing you to become productive quickly without needing to pull code onto your local machine. You can learn more about the extension in our GitHub Repositories guide.

Note: The GitHub Repositories extension works in VS Code Desktop as well to provide fast repository browsing and editing.

You can create a new file in the web just as you would in a VS Code Desktop environment, using File > New File from the Command Palette (F1).

Azure Repos (preview)

Support for Azure Repos (part of Azure DevOps) in Visual Studio Code for the Web is in preview, and the experience will continue to grow and evolve over time.

When you navigate to a URL with the schema, you will be able to read and search the files in the repo. You can fetch, pull, and sync changes, and view branches.

You can open any repository, branch, or tag from Azure Repos in VS Code for the Web by prefixing to the Azure Repos URL.

Alternatively, when you are on an Azure DevOps repository or pull request, you can press (.) to open it in

Current limitations

Azure Repos support is currently read-only. Commit, branch, fork, and PR actions are disabled in the Source Control view and Command Palette.

(Video) Use Visual Studio Code in Web Browser | Online VS Code | Best Online Code Editor

More custom URLs

Like in the desktop, you can customize VS Code for the Web through a rich ecosystem of extensions that support just about every back end, language, and service. Unlike in the desktop, it's easy for us to deliver customized experiences with pre-installed extensions through unique URLs (like and described above).


You can share and experience color themes through VS Code for the Web through the URL scheme:

For instance, you can go to to experience the Night Owl theme without having to go through the download and install process.

Note: The color theme URL scheme works for themes that are fully declarative (no code).

An extension can define multiple themes. You can use the schema /theme/extensionId/themeName. If no themeName is specified, VS Code for the Web will take the first theme.

As a theme author, you can add the following badge to your extension readme to allow users to easily try out your theme in VS Code for the Web (replacing <extensionId> with your theme extension's unique identifier):

[![Preview in](](<extensionId>)

Live Share guest sessions are available in the browser through the URL. The sessionId will be passed to the extension to make joining a seamless experience.

Continue working in a different environment

In some cases, you will want to access a different environment that has the ability to run code. You can switch to working on a repository in a development environment that has support for a local file system and full language and development tooling.

The GitHub Repositories extension makes it easy for you to clone the repository locally, reopen it on the desktop, or create a GitHub codespace for the current repository (if you have the GitHub Codespaces extension installed and access to create GitHub codespaces). To do this, use the Continue Working On... command available from the Command Palette (F1) or click on the Remote indicator in the Status bar.

Use your own compute power with the VS Code Server

You may develop against another machine in VS Code for the Web using the VS Code Server.

The VS Code Server is a private preview service you can run on a remote development machine, like your desktop PC or a virtual machine (VM). It allows you to securely connect to that remote machine from anywhere through a URL, without the requirement of SSH. This lets you "bring your own compute" to, enabling additional scenarios like running your code in the browser.

You may learn more about the VS Code Server in its documentation.

Safe exploration

VS Code for the Web runs entirely in your web browser's sandbox and offers a very limited execution environment.

(Video) VSCode.Dev (VS Code in the Browser) - A Few Reasons You Might Care

When accessing code from remote repositories, the web editor doesn't "clone" the repo, but instead loads the code by invoking the services' APIs directly from your browser; this further reduces the attack surface when cloning untrusted repositories.

When working with local files, VS Code for the Web loads them through your browser's file system access APIs, which limit the scope of what the browser can access.

Saving and sharing work

When working on a local file in the web, your work is saved automatically if you have Auto Save enabled. You can also save manually as you do when working in desktop VS Code (for example File > Save).

When working on a remote repository, your work is saved in the browser's local storage until you commit it. If you open a repo or pull request using GitHub Repositories, you can push your changes in the Source Control view to persist any new work.

Run anywhere

Similar to GitHub Codespaces, VS Code for the Web can run on tablets, like iPads.

Language support

Language support is a bit more nuanced on the web, including code editing, navigation, and browsing. The desktop experiences are typically powered by language services and compilers that expect a file system, runtime, and compute environment. In the browser, these experiences are powered by language services running in the browser that provide source code tokenization and syntax colorization, completions, and many single-file operations.

Generally, experiences fall into the following categories:

  • Good: For most programming languages, VS Code for the Web gives you code syntax colorization, text-based completions, and bracket pair colorization. Using a Tree-sitter syntax tree through the anycode extension, we're able to provide additional experiences such as Outline/Go to Symbol and Symbol Search for popular languages such as C/C++, C#, Java, PHP, Rust, and Go.
  • Better: The TypeScript, JavaScript, and Python experiences are all powered by language services that run natively in the browser. With these programming languages, you'll get the "Good" experience plus rich single file completions, semantic highlighting, syntax errors, and more.
  • Best: For many "webby" languages, such as JSON, HTML, CSS, and LESS, etc., the coding experience in is nearly identical to the desktop (including Markdown preview!).

You can determine the level of language support in your current file through the Language Status Indicator in the Status bar:

Visual Studio Code for the Web (3)


Since VS Code for the Web runs completely within the browser, some experiences will naturally be more constrained when compared to what you can do in the desktop app. For example, the terminal and debugger are not available, which makes sense since you can't compile, run, and debug a Rust or Go application within the browser sandbox.


Only a subset of extensions can run in the browser. You can use the Extensions view to install extensions in the web, and extensions that cannot be installed will have a warning icon and Learn Why link. We expect more extensions to become enabled over time.

Visual Studio Code for the Web (4)

When you install an extension, it is saved in the browser's local storage. You can ensure your extensions are synced across VS Code instances, including different browsers and even the desktop, by enabling Settings Sync.

(Video) Using Visual Studio Code to make a website

When an Extension Pack contains extensions that do not run in the browser sandbox, you will get an informational message with the option to see the extensions included in the pack.

Visual Studio Code for the Web (5)

When extensions are executed in the browser sandbox, they are more restricted. Extensions that are purely declarative, such as most themes, snippets, or grammars, can run unmodified and are available in VS Code for the Web without any modification from the extension authors. Extensions that are running code need to be updated to support running in the browser sandbox. You can read more about what is involved to support extensions in the browser in the web extension authors guide.

There are also extensions that run in the browser with partial support only. A good example is a language extension that restricts its support to single files or the currently opened files.

File system API

Edge and Chrome today support the File System API, allowing web pages to access the local file system. If your browser does not support the File System API, you cannot open a folder locally, but you can open files instead.

Browser support

You can use VS Code for the Web in Chrome, Edge, Firefox, and Safari.

Webviews might appear differently or have some unexpected behavior in Firefox and Safari. You can view issue queries in the VS Code GitHub repo to track issues related to specific browsers, such as with the Safari label and Firefox label.

There are additional steps you can take to improve your browser experience using VS Code for the Web. Review the Additional browser setup section for more information.

Mobile support

You can use VS Code for the Web on mobile devices, but smaller screens may have certain limitations.


Certain keybindings may also work differently in the web.

⇧⌘P (Windows, Linux Ctrl+Shift+P) won't launch the Command Palette in Firefox.⇧⌘P (Windows, Linux Ctrl+Shift+P) is reserved in Firefox.
As a workaround, use F1 to launch the Command Palette.
⌘N (Windows, Linux Ctrl+N) for new file doesn't work in web.⌘N (Windows, Linux Ctrl+N) opens a new window instead.
As a workaround, you can use Ctrl+Alt+N (Cmd+Alt+N on macOS).
⌘W (Windows, Linux Ctrl+W) for closing an editor doesn't work in web.⌘W (Windows, Linux Ctrl+W) closes the current tab in browsers.
As a workaround, you can use Ctrl+Shift+Alt+N (Cmd+Shift+Alt+N on macOS).
⇧⌘B (Windows, Linux Ctrl+Shift+B) will not toggle the favorites bar in the browser.VS Code for the Web overrides this and redirects to the "Build" menu in the Command Palette.
Alt+Left and Alt+Right should navigate within the editor but may incorrectly trigger tab history navigation.If focus is outside the editor, these shortcuts trigger tab history navigation instead.

Additional browser setup

There are additional browser configuration steps you can take when working with VS Code in a browser.

Opening new tabs and windows

In certain cases, you may need to open a new tab or window while working in VS Code for the Web. VS Code might ask you for permission to access the clipboard when reading from it. Depending on your browser, you may grant access to the clipboard or otherwise allow for pop-up windows in different ways:

  • Chrome, Edge, Firefox: Search for "site permissions" in your browser's settings, or look for the following option in the address bar on the right:

Visual Studio Code for the Web (6)

(Video) Visual Studio Code Tutorial for Beginners - Introduction

  • Safari: In the Safari browser, go to Preferences... > Websites > Pop-up Windows > the domain you're accessing (for example,, and select Allow from the dropdown.



Is there a web version of VS Code? ›

To get started, go to in your browser. VS Code for the Web has many of the features of VS Code Desktop that you love, including search and syntax highlighting while browsing and editing, along with extension support to work on your codebase and make simpler edits.

Is VS Code good for web? ›

Built with love for the Web

VS Code includes enriched built-in support for Node. js development with JavaScript and TypeScript, powered by the same underlying technologies that drive Visual Studio. VS Code also includes great tooling for web technologies such as JSX/React, HTML, CSS, SCSS, Less, and JSON.

How do I view Visual Studio code in browser? ›

For single html file, in VS 2022, you can click File > View in Browser (Ctrl + Shift + W) to preview it(or right-click the white space of this single html file > click View in Browser ).

How do I open VS Code in Chrome? ›

How to Launch Chrome on Visual Studio Code
  1. Step 1: Install the Live Server extension.
  2. Step 2: Set the default browser.
  3. Step 3: Run the code in Chrome.

Why HTML is not supported in VS Code? ›

It is not a programming language and a HTML file cannot be compiled into a program to be run in your Terminal. Therefore, your Code Runner extension throws an error message since HTML files cannot be run in a Terminal.

Should I use Visual Studio or VS Code for web development? ›

If you need to collaborate with team members on development or debugging, then Visual Studio is the better choice. If you need to do serious code analysis or performance profiling, or debug from a snapshot, then Visual Studio Enterprise will help you. VS Code tends to be popular in the data science community.

Which is better for web development Visual Studio or Visual Studio Code? ›

Visual Studio supports most of the same programming languages as VS Code and includes features for creating Windows and Android applications. However, Visual Studio is significantly more expensive than VS Code.

Which Visual Studio is best for web development? ›

2. Best IDEs for Web Development
  • Visual Studio.
  • Eclipse.
  • PyCharm.
  • Android Studio.
  • Net Beans.
  • AWS Cloud 9 IDE.
  • IntelliJ IDEA.

Is Visual Studio code good for html? ›

Visual Studio Code provides basic support for HTML programming out of the box. There is syntax highlighting, smart completions with IntelliSense, and customizable formatting. VS Code also includes great Emmet support.

Can I build a website in Visual Studio? ›

To create an ASP.NET Razor website in Visual Studio: Open Visual Studio. In the File menu, click New Web Site. In the New Web Site dialog box, select the language to use (Visual C# or Visual Basic).

Can I develop a website on Visual Studio? ›

Start Visual Studio, on the File menu select New, and then select Project. In the New Project dialog box, select Visual Basic or Visual C# as the programming language. In the Templates pane, select ASP.NET Empty Web Application, and name the project SofiaCarRentalWebApp. Click OK to create the solution and the project.

How do I use Visual Studio in Chrome? ›

To add a new browser to Visual Studio, follow these steps:
  1. Click the down arrow to the right of IIS Express , and select the Browse With... option (see fig. ...
  2. The Browse With dialog box will open. Click the Add button (see fig. ...
  3. In the Program field, enter the path to Google Chrome.
Mar 6, 2020

How do I run HTML code in browser? ›

Find the HTML record you need to see, right-click on it, and pick Open with from the menu. You will see a full rundown of applications that you can use to run your document. Your default program will be at the first spot on the list. Select Google Chrome from the rundown, and view your record in the program.

How to use HTML5 in Visual Studio Code? ›

HTML5 Shortcut

To try the shortcut, create a new HTML file in Visual Studio Code. Then, start typing html . From the intellisense dropdown, select html:5 and press Enter key. Visual Studio automatically brings the boilerplate HTML5 code to the file.

Can I use Visual Studio for HTML and CSS? ›

Visual Studio offers powerful HTML, CSS, JavaScript, and JSON editors. Tap into the power of LESS, and Sass, use PHP, Python, or C# with ASP.NET. All the popular languages are supported and you can move between languages and project types with ease.

Can VS Code be used for CSS? ›

Visual Studio Code has built-in support for editing style sheets in CSS . css , SCSS . scss and Less .

Is Visual Studio Code better than Dreamweaver? ›

Reviewers felt that Visual Studio Code meets the needs of their business better than Adobe Dreamweaver.

Is VS Code best for JavaScript? ›

VS Code ships with excellent support for JavaScript but you can additionally install debuggers, snippets, linters, and other JavaScript tools through extensions.

Is Visual Studio Code used professionally? ›

What is Visual Studio Code? Visual Studio Code is one of the popular text editors used by professionals and recommended to new coders. Being one of Microsoft's renowned software, VS code is free to use, open-source, and compatible with Windows, Linux, and macOS.

Is VS Code good for Webdev? ›

15 Best Visual Studio Code Extensions for Web Developers in 2021. Visual Studio Code is a source code editor for building modern web applications. It is a free and open-source editor. It supports a number of extensions that can be used for web application development.

Which is better Jupyter or Visual Studio Code? ›

The new Jupyter extension for VS Code comes with full support for our beloved . ipynb files, bringing interactive programming to the editor. You may lose some things, like your favorite Jupyter extensions, but processes like debugging may become more straightforward. Ultimately, it comes down to how you use Notebooks.

Which is better for web development HTML or Python? ›

While HTML is relevant for website development, Python is a general-purpose programming language that provides plenty of project opportunities in fields like software and web development, machine learning, and data science. In the Stack Overflow 2020 survey, Python was fourth on the list of programming languages.

What IDE do most Web Developers use? ›

A Glimpse Into the Top 15 Web Development IDEs for 2022
  • Visual Studio Code. One of the most popular IDEs for web development, Visual Studio Code is considered the best JavaScript IDE for Windows, Mac, and Linux. ...
  • IntelliJ IDEA. ...
  • Aptana Studio 3. ...
  • Atom by GitHub. ...
  • Sublime Text 3. ...
  • Eclipse. ...
  • PyCharm. ...
  • AWS Cloud9.
Oct 18, 2022

Which code is best for web development? ›

15 Best Programming languages for Web Development in 2023
  • HTML.
  • CSS.
  • JavaScript.
  • Python.
  • Java.
  • Typescript.
  • Objective C.
  • C++
Nov 29, 2022

What IDE should I use for website development? ›

7 Best IDE for Web Development
  • Visual Studio Code.
  • PyCharm.
  • Brackets.
  • Atom.
  • Komodo Edit.
  • Netbeans.
  • JetBrains.

Is HTML coding outdated? ›

There are no longer any good reasons to use outdated versions of HTML over modern standards. Unfortunately, there's a lot of information on the Internet and in books about older versions of HTML.

Can you edit HTML in VS Code? ›

The code editor canvas supports HTML editing.

Do hackers use HTML? ›

As mentioned above, HTML and Javascript can be used when trying to hack from the client side of a web-based application. After you gain access to the web server, you might need to know PHP, Java, C# which are some examples of server-side programming languages.

How to write HTML in Visual Studio Code? ›

  1. To create a new file, click File in the menu bar at the top. Then click New File. Begin typing your HTML code.
  2. To open an existing file, click File in the menu bar at the top. Then click Open File. Navigate to the HTML file you want to open and click it to select it. Then click Open.
Dec 17, 2022

Why is Visual Studio good for web development? ›

Visual Studio includes integrated tools to deploy your web application to any host or scale to the Microsoft Azure cloud. Publish and manage your websites and virtual machines from within Visual Studio.

How do I open html code in Chrome? ›

Google Chrome
  1. Click the menu icon. on the browser toolbar.
  2. Select More tools, then View Source.

Is VSCode built on Chrome? ›

Get started here. Visual Studio Code (VS Code) is a free, open source, lightweight and powerful code editor for Windows, Mac and Linux, based on Electron/Chromium. It has built-in support for JavaScript, TypeScript and Node.

How do I run JavaScript in VSCode in Chrome? ›

1) Take VSCode 2) Right click on the file in left pane 3) Click "Reveal in explorer" from context menu 4) Right click on the file -> Select "Open with" -> Select "Choose another program" 5) Check box "Always use this app to open . js file" 6) Click "More apps" -> "Look for another app in PC" 7) Navigate to node.

Can you run code on browser? ›

You can run code in the browser by creating an HTML file that references the script. In our case, we used the defer option, which will execute the JS after the HTML file is finished loading.

How do I run a script in my browser? ›

To execute JavaScript in a browser you have two options — either put it inside a script element anywhere inside an HTML document, or put it inside an external JavaScript file (with a . js extension) and then reference that file inside the HTML document using an empty script element with a src attribute.

Can I install VS Code in Chrome OS? ›

While Visual Studio is only supported on Windows and macOS, Visual Studio Code offers a Linux version which means that you can run it on a Chromebook.

Is VS Code built on Chrome? ›

Get started here. Visual Studio Code (VS Code) is a free, open source, lightweight and powerful code editor for Windows, Mac and Linux, based on Electron/Chromium. It has built-in support for JavaScript, TypeScript and Node.

Is Chromebook enough for coding? ›

While there are some limitations to programming locally on your Chromebook, you can still program in many languages. The following articles will help you set up a specific language or tool on your Chromebook: Programming in Python on a Chromebook. Installing Jupyter Notebook on a Chromebook.

How do I code HTML on Chromebook? ›

Visit the Chrome Web Store. Install the Caret app on your Chromebook. Launch Caret. At the bottom of the Caret window, click Plain Text and select HTML.
  1. Before you start coding, from the File menu, select Save File.
  2. Select Google Drive>My Drive.
  3. Name the file index. html. ...
  4. Type the HTML code into the file.
Nov 16, 2020

How do I run HTML code in vs Chrome? ›

  1. To create a new file, click File in the menu bar at the top. Then click New File. Begin typing your HTML code.
  2. To open an existing file, click File in the menu bar at the top. Then click Open File. Navigate to the HTML file you want to open and click it to select it. Then click Open.
Dec 17, 2022

Do Google engineers use VS Code? ›

Various teams at Google are using Visual Studio Code extensively in a number of projects, including Chrome, Angular and more.

How do I create a Web browser in Visual Studio? ›

Making a Web Browser in Visual Studio
  1. Step 1: The Template. Open a new project in Visual Studio, and choose "Windows Forms Application". ...
  2. Step 2: Getting What You Need. Next, go to the toolbox and get one textbox, 5 buttons, and one webBrowser. ...
  3. Step 3: Naming the Buttons. ...
  4. Step 5: Debug It! ...
  5. Step 6: Finishing.


1. Visual Studio Code Web Dev Setup In 6 Minutes
2. My Visual Studio Code Setup for Web Development
3. Free Course: Beginner Web Design using HTML5, CSS3 & Visual Studio Code
(Bring Your Own Laptop)
4. Visual Studio Code setup for HTML CSS and JavaScript | VS Code setup for beginners
(Norbert BM Web Development)
5. Create ASP.NET CORE Web Application using Visual Studio Code
(Coding World)
6. Visual Studio Code 2022 | Web Dev Setup | Top Extensions, Themes, Settings, Tips & Tricks
Top Articles
Latest Posts
Article information

Author: Corie Satterfield

Last Updated: 12/04/2022

Views: 5928

Rating: 4.1 / 5 (62 voted)

Reviews: 85% of readers found this page helpful

Author information

Name: Corie Satterfield

Birthday: 1992-08-19

Address: 850 Benjamin Bridge, Dickinsonchester, CO 68572-0542

Phone: +26813599986666

Job: Sales Manager

Hobby: Table tennis, Soapmaking, Flower arranging, amateur radio, Rock climbing, scrapbook, Horseback riding

Introduction: My name is Corie Satterfield, I am a fancy, perfect, spotless, quaint, fantastic, funny, lucky person who loves writing and wants to share my knowledge and understanding with you.