Supercharge Your Web Development: Real-Time HTML Rendering on All Devices with `VS Code Live Server ` Hack

5 min readSep 13, 2023

In the world of web development, the need for instant feedback and real-time rendering is crucial. Imagine being able to see your web page changes on your mobile device the moment you hit the save button in your code editor. It’s not only a game-changer but also a time-saver! In this article, we will unveil a powerful hack that leverages the Live Server extension in Visual Studio Code, allowing you to effortlessly render your HTML on your mobile browser while you code. Say goodbye to the hassle of constant device switching and hello to unparalleled productivity!

NB: Ensure all devices are connected to the same network for this hack to work seamlessly.

Screen recording of live update on mobile Browser when file is saved in Vs Code.

Purpose:

The purpose of this article is to introduce you to a clever workaround that will revolutionise your web development workflow. We’ll guide you through the steps, from installing the Live Server extension in VS Code to changing the default URL and running your project on your mobile device. We’ll also explore the advantages and merits of this hack, emphasising its utility when working on the same local network and across all connected devices.

Step 1:

Installing the Live Server Extension Before we dive into the magic of real-time HTML rendering, make sure you have Visual Studio Code installed on your machine. If you don’t have it yet, you can download it from VS Code’s official website.

1.1. Open VS Code, navigate to the Extensions view by clicking the square icon on the left sidebar or using the shortcut Ctrl+Shift+X.

1.2. Search for “Live Server” in the Extensions marketplace and click the “Install” button for the one provided by Ritwick Dey.

Step 2:

Changing the Default URL By default, Live Server opens your project in a local server with a URL like http://127.0.0.1.1/. We want to change this URL to match your local IP address, making it accessible on your mobile device.

2.1. After installing Live Server, go to your VS Code settings by clicking “File” -> “Preferences” -> “Settings” or using the shortcut Ctrl+,.

2.2. In the search bar of the settings, type “liveServer.settings.root” and click the “Edit in settings.json” link.

or click the settings icon and Navigate to Extenstion Settings as shown below

Step 3:

Find Host in the Live server settings, add your localhost ip address there , 192.168.1.1

Step 4:

After that, Check the Use Local Ip Box

Step 5:

After that, Open your root html file, you can see the Go Live Option from Live server in the right bottom corner. Click it to start the server.

Right bottom,Go Live button from Live server

Step 6:

Ready for the magic, you will now get the running output at the url that we mentioned. Open the same url in any device browser(Mobile, tablets, etc) for live rendering of the HTML Output.

Advantages of Running on Mobile Browsers Live:

Instant Feedback: See your changes in real-time on your mobile device as you code, eliminating the need for constant manual refreshes.
Cross-Device Testing: Easily test your web pages on multiple mobile devices simultaneously, ensuring a responsive design.
Improved Productivity: Work more efficiently by focusing on coding without device switching interruptions.
Collaborative Development: Collaborate with team members by sharing your local IP address, allowing them to view your work instantly.
Network Flexibility: This hack works seamlessly on all devices connected to the same local network, making it a valuable tool for group projects or testing with various devices.

This is what It looks on a Android Phone(Chrome)

The timing is not correct in the recording, but both actually updates instantly after saving.

By harnessing the power of the Live Server extension in Visual Studio Code and a simple IP address tweak, you can elevate your web development game. Enjoy the convenience of real-time HTML rendering on your mobile devices, and take full advantage of the benefits this hack offers. Whether you’re a solo developer or part of a team, this technique will undoubtedly boost your productivity and efficiency. Say goodbye to the old way of web development and embrace the future of coding!

All the essential functions you need for efficient web development are right at your fingertips with this extension. From instant feedback to cross-device testing, collaborative development, and network flexibility, it’s a toolbox packed with features. Just remember, for this hack to work seamlessly, all devices must be connected to the same local network. So, connect, code, and create without limitations, and watch your web development projects flourish like never before!