LWC Live Preview in VS Code — How to Use It with Single Component Live Preview

 

See your component changes instantly without deploying — right inside VS Code

If you've ever spent time deploying a component just to check a minor CSS tweak, this feature is for you. LWC Live Preview in VS Code gives you a real-time panel that updates the moment you save — no deploy, no page refresh. It became GA in Summer '26 and it's one of those changes that quietly saves you hours every week.

What Is LWC Live Preview?

According to the official LWC Developer Guide, Live Preview lets you run a real-time preview of a Lightning web component inside a dedicated panel in VS Code. The preview updates automatically when you save local changes, making it easy to test component design and behaviour without leaving your IDE.

Live Preview was previously called Local Dev. In Spring '26, Salesforce rebranded it to reflect the real-time nature of the preview tools. The VS Code extension for Lightning web components is now generally available in Summer '26.

Prerequisites

Before you can run Live Preview in VS Code, you need two things in place according to the official setup docs:

1. Salesforce CLI installed — the CLI automatically installs the Live Preview plugin. Run sf update to make sure you have the latest version.
2. Live Preview VS Code extension — find it on the VS Code Marketplace: Salesforce Live Preview.

When you run a Live Preview command for the first time, the CLI will prompt you to enable the feature. Press Enter or type y to enable it.

The Four Live Preview Modes

Live Preview covers several scenarios. Here's the full breakdown from the official LWC Developer Guide:

Tool	Use Case	CLI Command
Lightning App Live Preview	Preview a full Lightning app (desktop or mobile)	sf lightning dev app
Experience Sites Live Preview	Preview an Experience Cloud LWR site	sf lightning dev site
Single Component Live Preview	Preview one LWC in isolation in the browser	sf lightning dev component
Live Preview VS Code Extension	Preview a single LWC inside VS Code panel	Right-click → SFDX: Open in Lightning Preview

This post focuses on the VS Code extension — the one that keeps you in your IDE the entire time.

How to Open the Live Preview Panel in VS Code

According to the official docs, there are three ways to launch the Lightning Preview panel:

Method 1 — Right-click in Explorer (fastest)

1. In the VS Code Explorer sidebar, find your component folder
2. Right-click the component directory or any file inside it
3. Select SFDX: Open in Lightning Preview

Method 2 — Command Palette

1. Open the Command Palette (Cmd+Shift+P on Mac, Ctrl+Shift+P on Windows)
2. Search for SFDX: Open in Lightning Preview
3. Select it, then enter or select the component name when prompted

Method 3 — Single Component via CLI

If you prefer the terminal, run this command:

Bash — SF CLI

sf lightning dev component --target-org myOrg --name myComponentName

If you omit the --name flag, the CLI will prompt you to pick from a list of available components in your project.

What Updates Automatically vs. What Needs a Redeploy

This is the most important thing to understand before using Live Preview day-to-day. The official docs are explicit about which changes hot-reload and which don't.

These changes update instantly when you save:

• HTML attribute changes (e.g. changing a title value)
• Adding a new child component reference in markup
• CSS changes (e.g. updating SLDS hooks or custom properties)
• JavaScript logic changes inside existing component methods
• New or deleted files in an existing component (since Spring '25)

These changes require a manual deploy + restart:

• Adding a new @api property or method
• Wire adapter changes (new wire, new GraphQL query, etc.)
• Importing new @salesforce scoped modules
• Updating the .js-meta.xml file
• Changes to service component libraries

💡 For a component previewed in isolation (single component mode)You only need to refresh the browser page to pick up changes that don't hot-reload — not a full redeploy. This is much faster than the full Lightning app preview restart.

Single Component Live Preview — What It Can Access

When previewing a single component in isolation, the official docs confirm the component can access:

• Public Lightning Data Service wire adapters
• @salesforce scoped modules
• Apex controllers

The toolbar in the single component browser preview also includes a device dimension switcher (to test responsive behaviour) and a Project Components sidebar listing all previewable components in your project.

Agentforce Vibes Integration

The official docs note that Live Preview works directly with Agentforce Vibes. If you instruct Agentforce Vibes to update your component code, it can automatically open the component in the Lightning Preview panel when it's done — so you can review the changes without any manual steps.

Summary & Key Takeaways

🚀 LWC Live Preview in VS Code — Quick Reference

• Install the Salesforce Live Preview VS Code extension from the marketplace
• Launch via right-click → SFDX: Open in Lightning Preview, or Command Palette, or CLI: sf lightning dev component
• HTML, CSS, and JS method changes hot-reload instantly on save
• @api changes, wire adapters, and .js-meta.xml changes still need a deploy
• Single component preview can access wire adapters, @salesforce modules, and Apex
• Works in sandbox and scratch orgs — recommended to avoid production
• LWC preview is GA; React preview is Beta in Summer '26
• Previously called Local Dev — rebranded to Live Preview in Spring '26

If you were doing 60 deploys a day to review small LWC changes — and honestly, most of us were — Live Preview cuts that down significantly. Set it up once, and it becomes part of every LWC development session going forward.

📄 Sources: Run a Live Component Preview — LWC Developer Guide  

 If you have any question please leave a comment below.

If you would like to add something to this post please leave a comment below.

Share this blog with your friends if you find it helpful somehow !

Thanks