Live Preview

An extension that hosts a local server for you to preview your web projects on!

This extension is most useful for projects where a server is not already created (e.g. not for apps using React, Angular, etc.). To work with these, feel free to run the Simple Browser: Show command that is already built-in with VS Code.

Features:

• HTML File Previewing: Preview your HTML files quickly by clicking the preview button in the top right corner of your editor or using the context menu.
• Embedded Preview: A preview is available in-editor for the files hosted by the server.
• Live Refreshing: See the changes as you make them. By default, changes appear as you make them in the editor. You can also change this in the extension settings to refresh the preview on save or not at all.
• Persistent Server Task with Server Logging: If you're looking for a persistent server to run, you can run a Live Preview task, which also logs the server traffic.
• External Browser Previewing: Although all of the images above use the embedded browser, you can also experience the same features in an external browser.
• External Browser Debugging: The external browser preview also supports debugging via the built-in js-debug extension and attaching to the Edge Devtools Extension. This allows support for features such as setting breakpoints and inspecting elements.
• Console Output Channel (For Embedded Preview): For a simple view of the embedded preview's console messages, go to the Output tab and select Embedded Live Preview Console in the dropdown.
• Workspace-less Previewing: No workspace? No problem! For a quick preview of your file, the server can also access files outside of your workspace to preview.
• Multi-root Support: Live Preview works cleanly with your multi-root workspaces! It will simply open an additional server for each root that you open a preview on.