Up next in 10
How to Show Live Preview of HTML Files With Localhost HTTP Server in VSCode IDE
0 views
Jul 4, 2025
Get the full source code of application here:
View Video Transcript
0:00
Uh hello guys, welcome to this video. So
0:02
in this video, I'll show you how to open
0:04
your HTML files directly inside VS Code
0:07
with live preview. So there is an
0:10
extension that you can install for this
0:11
which is live preview which is developed
0:14
by Microsoft. It's used by almost 9.4
0:17
billion developers. So simply install
0:20
this extension. So what does it do? It
0:22
actually host a local development server
0:25
to preview your HTML pages directly
0:28
inside VS code. So once you install this
0:31
just create a simple HTML file and then
0:34
basically it will have this option right
0:37
here
0:39
of show preview. So right here you will
0:41
see this option show preview on the
0:43
right hand side corner of the screen and
0:45
as soon as you do this your live preview
0:48
will start and if you make any sort of
0:50
changes you will see you will be able to
0:53
see the changes you will see if I make
0:56
uh
0:59
some CSS changes automatically it will
1:02
be reflected back. So don't need to open
1:03
the browser you can all do this right in
1:06
the brows uh VS code itself. So for the
1:10
JavaScript I think JavaScript doesn't
1:12
execute only the CSS and HTML. So if you
1:15
make any sort of changes into your HTML
1:21
and CSS as well it is reflected back but
1:24
not for JavaScript. For JavaScript you
1:27
need to open the browser.
1:30
So as you can see, so this is your local
1:34
live preview of your HTML files directly
1:38
inside VS Code. Simply install this
1:41
extension and it will save you a lot of
1:43
time because you don't need to go to the
1:45
browser and see the changes. You can
1:47
directly side by side you can see the
1:49
changes as you type the code here. You
1:51
will see
1:53
it's very simple and uh
2:00
you can have any property here.
2:09
So, thank you very much for watching
2:10
this video and also check out my website
2:13
freemediattools.com
2:14
uh which contains thousands of tools.
#Development Tools
#Internet & Telecom