Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>Web PreviewNew to Visual Studio Code? Get it now.
Web Preview

Web Preview

Jabed Hossain

|
40,668 installs
| (2) | Free
Live Web Preview for local web development in vscode like html-css, react, vue, tailwindcss
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

VScode Web Preview

⚠️ WARNING: This extension is still under development! ⚠️

An extension for you to preview your web projects on!

This is not a live-server it's live-preview. You can use any local server like http://localhost:3000. You can change url.

Keyboard Shortcuts

ctrl+shift+p command Open Web Preview and Web Preview Url

ctrl+alt+p Open Web Preview and ctrl+alt+u open Web Preview Url input box. Open Web Preview URL when web preview is active.

Live preview in vscode


Set default screen size and url in settings.json (example)

    "webPreview.url": "http://localhost:3000",
    "webPreview.mediaScreenOverride": true, // Override default screen object
    "webPreview.mediaScreen": {
        "Mobile": "380x796", // width and height
        "Tablet": 768,       // width
        "Laptop": 1024,      // width
    }

Creator: Jabed Hossain
https://github.com/jabed-dev

creator

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft