Open files in VS Code and Cursor / Code and APIs

Preview an HTML file with its CSS and images in VS Code

Install the free HTML Preview & HTML Viewer by Zovo, open an .html file and press Ctrl+K V (Cmd+K V on macOS). The page opens beside the editor with its linked CSS, JavaScript and images, and it updates as you type without saving. It needs no local web server and no port. If you need a real server, for example for fetch of local JSON, use Live Preview from Microsoft instead.

Free, MIT license. Extension ID zovo.zovo-html-preview, version 0.2.1. Needs VS Code 1.90.0 or newer.

Also free from Zovo: Auto Rename Tag & Close Tag Sync, VS Code Marketplace · Open VSX (Cursor, Windsurf).

Steps in VS Code

1. Install HTML Preview from the Marketplace, or press Ctrl+P (Cmd+P on macOS) and run ext install zovo.zovo-html-preview.
2. Open an .html file.
3. Click the preview icon at the top right of the editor, or press Ctrl+K V (Cmd+K V on macOS). Your .html file stays a normal text editor.
4. Pick a width from the Width list (320, 375, 768, 1024 or 1440 px) to see the page at phone, tablet or desktop size.
5. Click Console to see console.log lines, script errors and linked files that were not found.

Steps in Cursor, Windsurf or VSCodium

1. Open the Extensions view with Ctrl+Shift+X (Cmd+Shift+X on macOS).
2. Search for zovo.zovo-html-preview and click Install. Cursor, Windsurf and VSCodium install from Open VSX, where it is published as zovo/zovo-html-preview.
3. If your editor has no gallery, download the .vsix from the Open VSX page and run "Extensions: Install from VSIX...".
4. Then use it the same way as in VS Code.

What HTML Preview handles

• Linked stylesheets, @import, CSS url(), scripts, srcset, fonts, video and local iframes, from relative, ../ and / paths.
• Updates while you type, and when you save a linked CSS, JS or image file. The scroll position stays where it was.
• Links to other local pages open in the preview, with Back and Forward buttons.
• A page stuck in an endless loop is stopped after 5 seconds. It also works over Remote-SSH, WSL and in dev containers.

What it does not do

• It is a preview, not a web server. Pages that need one (fetch of local JSON, server-side includes, PHP) do not work here.
• Bare module imports such as import "react" and import maps are not followed.
• CSS, fonts and scripts from a CDN stay off until you click Load for this file.
• Edits made in the preview are not saved back to the file.

In JetBrains IDEs (IntelliJ IDEA, PyCharm, WebStorm, CLion and others)

• No Zovo plugin for JetBrains IDEs. HTML Preview is for VS Code and editors built on it.
• Built-in browser preview. WebStorm and IntelliJ IDEA Ultimate can show an open HTML file in a built-in preview or in your browser, from the browser icons at the top right of the editor. No plugin is needed.

Other options

• Live Preview (ms-vscode.live-server, 14 million installs, on Open VSX). From Microsoft. Pick this one when the page needs a real local server. Its own description: "Hosts a local server in your workspace for you to preview your webpages on."
• HTML Preview (tht13.html-preview-vscode, 3 million installs, not on Open VSX). Its own description: "Provides ability to preview HTML documents." Not on Open VSX.
• HTML Preview (george-alisson.html-preview-vscode, 2.7 million installs, not on Open VSX). Its own description: "Provides ability to preview HTML documents." Not on Open VSX.

Install counts and Open VSX status were checked on 9 November 2026. Descriptions in quotes are the extensions' own.

Questions

More about HTML Preview

Read the HTML Preview page for every feature and setting, or the source code on GitHub.

Related guides

• Auto Rename Tag & Close Tag Sync on the VS Code Marketplace (also on Open VSX). Renames the matching HTML, JSX or Vue tag as you type.
• Open a SARIF file in VS Code
• Preview a Swagger or OpenAPI file in VS Code
• Test a regex in VS Code
• Take a screenshot of code in VS Code