Why This Is Useful
Building a Lightning Web Component normally goes like this: change some code, save, wait for the deploy, switch to your browser, refresh, look at it, spot a problem, repeat.
That loop is maybe fifteen seconds. Doesn’t sound like much until you do it four hundred times in a day.
Live Component Preview collapses it. Your component renders locally and updates as you type, with hot module replacement, while still talking to real data in your org.
Quick naming note, because it’s confusing: this used to be called Local Dev, and before that there was an older thing called the LWC Local Development Server, which I made a video about years ago. That old server was, to put it kindly, terrible in comparison. If you tried it once and gave up, this is not that. Try again.
What Makes It Different
The old local dev server rendered your components in isolation against mock data. Which meant everything looked slightly wrong, base components didn’t behave properly, and anything touching real org data simply didn’t work.
Live Component Preview runs your component in the actual Salesforce shell, connected to your actual org. Your wire adapters work. Your Apex calls work. Your SLDS styling is correct because it’s the real thing.
It also covers more than LWC now: Salesforce’s multi-framework components, so React and friends, plus both desktop and mobile previews.
Setting It Up
1. Enable it in your org.
Setup → Local Dev (you may find it under Lightning Components), and switch it on. It’s off by default.
2. Install the plugin.
sf plugins install @salesforce/plugin-lightning-dev3. Start it.
sf lightning dev appIt’ll ask which app you want to preview, then open a browser pointed at a local server that’s proxying your org.
First run generates a local certificate so it can serve over HTTPS. Your browser may grumble once. That’s expected.
Using It
Now just edit a component and save. That’s it.
The change appears in the browser immediately, without a deploy and without a page refresh. Change some CSS and watch it update while you’re still looking at it. Change JavaScript and the component re-renders in place.
The bit that surprised me most is that component state survives a lot of the time. If you’re eight clicks into a wizard tweaking the styling on step eight, you don’t get bounced back to step one on every save. That alone is worth the setup.
A few other commands worth knowing:
# Preview a specific Experience Cloud site
sf lightning dev site
# Preview on a mobile device or emulator
sf lightning dev app --device-type iosThat mobile preview is genuinely useful. Testing responsive behaviour by squashing your browser window is not the same as seeing it on a phone, and this is much faster than deploying and opening the Salesforce mobile app every time.
Pair it with the form factor module and you can actually verify your device-specific rendering works.
What It Doesn’t Do
Being honest about the boundaries so you’re not surprised:
Apex changes still need deploying. Only your client-side code is served locally. Change an Apex controller and you deploy it as normal.
It’s a development tool, not a testing environment. Always verify in the actual org before you call something done. There are edge cases where local and deployed behaviour differ slightly.
You need a connection. It’s proxying a real org, so this isn’t offline development.
Not everything is covered. Aura components aren’t included, and some newer or more obscure features may not preview correctly yet. Salesforce is still building this out.
Worth It?
Yes, and it’s about a ten minute setup.
If most of your work is Apex, you’ll barely notice it. If you spend your days in LWC, particularly doing anything visual, it’s one of the bigger quality of life improvements Salesforce has shipped for developers in a while.
Pair it with proper browser debugging and Debug Mode enabled, and LWC development stops feeling like a slow version of normal web development.
Salesforce’s documentation is here if you want the full detail.
Get Coding With The Force Merch!!
We now have a redbubble store setup so you can buy cool Coding With The Force merchandise! Please check it out! Every purchase goes to supporting the blog and YouTube channel.
Get Shirts Here!
Get Cups, Artwork, Coffee Cups, Bags, Masks and more here!
Check Out More Coding With The Force Stuff!
If you liked this post make sure to follow us on all our social media outlets to stay as up to date as possible with everything!
Youtube
Patreon
Github
Facebook
Twitter
Instagram
Salesforce Development Books I Recommend
Advanced Apex Programming
Salesforce Lightning Platform Enterprise Architecture
Mastering Salesforce DevOps
Good Non-SF Specific Development Books:
Clean Code
Clean Architecture
