Instantly See Your LWC Changes Without Pushing to Org
Developer productivity in Salesforce just got a major upgrade!
In this post, we’ll explore Lightning Preview, a powerful capability that allows you to preview Lightning Web Components directly in VS Code — without deploying to a scratch org, sandbox, or local server.
If you’re tired of switching back and forth between VS Code and your Salesforce org, or waiting for metadata deployments just to check UI changes, Lightning Preview will change the way you develop LWCs.
This blog is based on my latest YouTube video, where I walk you through the entire setup and demo step-by-step.
What is Lightning Preview?
Lightning Preview is a developer experience feature that enables you to run and preview Lightning Web Components locally in VS Code, using a fast and isolated environment.
You can:
- Preview LWC UI instantly
- See real-time updates while typing
- Test CSS, HTML, and JavaScript changes
- Build LWCs without connecting to any Salesforce org
- Use mock data or static parameters
In short, Lightning Preview makes Salesforce development feel more like modern web development.
Why Use Lightning Preview?
Before this feature, developers had two options:
-
Push/pull to a scratch org
-
Deploy metadata to a sandbox
Both were slow and required Internet + an active org.
With Lightning Preview you get:
- Zero-deploy workflow
- Live component rendering
- Instant styling feedback
- Auto-refresh on save
- Easy testing environment
Prerequisites
Make sure you have:
- VS Code installed
- Salesforce Extensions pack installed
- Lightning Local Dev installed
How to install Local Dev Server : https://www.salesforcebolt.com/2025/07/deep-dive-into-lwc-local-dev-server.html
Installing Lightning Preview
Lightning Preview comes as a part of the Salesforce Extension Pack for VS Code.
To enable it:
-
Open VS Code
-
Go to Extensions → Search: Salesforce Live Preview
Install/Update to latest version
-
Reload VS Code
That’s it — Lightning Preview is now available.
Running Lightning Preview for an LWC
Once installed, you’ll notice a “Open in Lightning Preview” option for every LWC.
Steps:
-
Right-click your LWC folder/ component in VS Code
-
Select “SFDX: Open in Lightning Preview”
-
A preview window opens instantly
-
Edit your HTML, CSS, or JS
-
The preview refreshes automatically
This gives you a fast feedback loop similar to frameworks like React or Vue.
What About CSS and SLDS?
Lightning Preview supports:
- Component CSS
- Shared style sheets
- SLDS styling
So your UI renders almost exactly as it would inside Salesforce.
Does Lightning Preview Support Apex?
No — Lightning Preview is front-end only.
If your LWC depends on:
- Apex methods
- Salesforce data
- LDS
- wire services
You’ll need to mock the data.
This is great for layout, UI logic, events, components interactions, and basic JS behavior.
Sample Code
Output
🎥 Watch the Full Video Demo Below
0 Comments