LWC Live Preview in VS Code - Learn How to Use It with Single Component Live Preview
Summary
LWC Live Preview in VS Code enables real-time preview of Lightning Web Components directly inside the IDE without redeploying for every change. Developers can see instant updates on HTML, CSS, and JavaScript method edits, significantly speeding up development and testing. The article details setup, usage methods, and the differences between hot-reload updates and those requiring redeployment. Single component preview supports wire adapters, Apex controllers, and Salesforce modules, providing a robust environment for LWC development. This tool helps Salesforce teams reduce deploy cycles and accelerate component design iterations.
Takeaways
- Install Salesforce Live Preview VS Code extension for real-time LWC previews.
- Launch Live Preview via right-click, Command Palette, or CLI with sf lightning dev component.
- HTML, CSS, and JS method changes hot-reload instantly without redeploy.
- Changes to @api properties, wire adapters, and .js-meta.xml require manual deploy.
- Single component preview supports Lightning Data Service, Apex, and @salesforce modules.
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.