Live preview of website when editing in Visual Studio Code

VSCode, being extremely lightweight (at least compared to Visual Studio), does not come with its own web server. This can be a bit confusing for those of us used to just hitting F5 in Visual Studio and getting our website launch in a browser.

When using VSCode, you have to rely on the power of Node.js instead.

This is a tutorial of how to start a really small project, containing only a single HTML file in VSCode and edit it with live preview in a browser

44• Oral Agents cheap viagra online If indicated – full blood count, lipid profile, renal profile,.


The first part, installing VSCode and Node.js was also covered in my last tutorial, Getting started with TypeScript in Visual Studio Code, so if you have already done that, skip to Creating your project below.

Install Visual Studio Code and Node.js

First download VSCode and Node.js and install both.

Make sure npm, node.js’ package manager is added to path. Open a command window and enter

If you get an error, reboot. If you still get an error, make sure npm and nodejs have been added to your path:

How to check if something is included in path in Windows

  1. Right-click My Computer
  2. Select Properties
  3. Select Advanced system settings
  4. Select tab Advanced
  5. Click on Environment Variables

There are two Paths, one for your user (at the top of the window) and one systemwide (at the bottom).

Select Path and click Edit. The path for your user should contain this:

The system wide path should contain this:

Creating your project

Create a new directory Demo and open this directory in VSCode. Create a file index.html with this content:

Installing a web server

The web server I recommend you install is live-server. You can run this server from any directory, and it detects changes to your files and reloads the page in the browser, which is really useful.

Open a command window and enter

Run live-server from VSCode

In VSCode, right-click on index.html and select Open in Command Prompt. In the console window, type

Live-server should now start and will keep running untill you close the command window
. It will also automatically open your default browser.

You should see a website saying “Hello World!”

Live preview

To make sure that live-server is detecting changes, change the content of index.html. As soon as you hit Save, the page in the browser will reload.

If you set VSCode to auto save, you don’t even need to do that.


  1. Does not do anything. I can see live server code injected into my test1.html page. But I have to reload the browser manually to see changes. Neither Chrome nor Firefox is working.

    Live server cammand windows shows no error:

    Serving “C:\Users\user1\Code\web\html” at
    GET /favicon.ico 404 2.131 ms – 24
    GET /favicon.ico 404 0.797 ms – 24

    Any advice?

  2. Does it make any difference if you call the file index.html instead of test1.html?

    I’m just guessing here, I have not experienced your problem.

    Since the live-server javascript is inserted, but not reloading the page, I’m guessing there is some kind of javascript error.

    Does the console window in your browser display any error messages?

  3. Thanks for this …. I am just about to quit from vs code but you save me …. Thanks again 🙂 and Happy Xmas

  4. Followed your directions, yet when I “Open in Command Prompt”, I get the following error:

    ‘live-server’ is not recognized as an internal or external command, operable program or batch file.

    Should I manually add it to my PATH as well?

    1. Ok, never mind. Just had to add C:/Program Files/nodejs to my PATH. Strange, I’d thought that was done when I installed.

      Anyway, it’s working now. Is there a way to save at every keypress?

  5. Wow men.
    God bless you . You save a lot of time and it will make people get closer to what they want and it aims to make a better world

  6. It works but it does not host my style.css so I just see plain html. Any way to make it host the css and js files as well?

    1. I think you should be able to see files in the directory you run the live-server command and below (subdirectories), but not outside the current directory.

      Is this true for your project?

      And have you made sure relative paths are still correct depending on where your HTML file is and the location of scripts and stylesheets?

  7. Bjarte i followed all of the steps but the only one i have an issue with is “In VSCode, right-click on index.html and select Open in console. In the console window, type”

    I don’t see this option to open in console when i right click.

  8. Awesome info! tested and working smoothly! really glad for this help!
    Thank you!

  9. This post helped point me in the right direction; not exactly what I had to do but for the most part it helped me find what was going wrong with VSC. So thank you for that!

    The link on this post for downloading node.js is sort of broken, so here it is:
    After installing the current version of node.js, I edited the environment variables on Path. I added both the location of where the node installed (which was C:\Program Files\nodejs for me) and also added: %USERPROFILE%\AppData\Roaming\npm.
    Next after reopening VSC, in the command prompt/terminal (opened with CTRL + `):
    1) I typed npm i -g npm to install the global node package manager.
    2) Then I type npm i -g update to update the manager.
    3) lastly I installed live-server by typing npm i -g live-server.

    After all that live-server worked for me.
    If you install node.js and still receive an error from the command prompt/terminal when you type npm i -g npm, I cannot say what is wrong but wish you luck in fixing your issue.

    Again thanks to Bjarte Aune Olsen for opening the dialogue and for helping me figure this out.

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.