Salesforce Live Preview for Visual Studio Code (Beta)

Overview

The Salesforce Live Preview extension enables you to preview Lightning Web Components directly within Visual Studio Code. When you save changes to your component files, the preview automatically updates, allowing you to iterate quickly without deploying code or manually refreshing your browser.

Documentation

For detailed information about local development with Salesforce and previewing components, see: Preview Components with Local Dev

Features

Integrated Webview Preview: Preview components directly within VS Code
Automatic Server Management: Preview server starts on extension activation
Smart Component Tracking: Automatically updates preview when switching between files
Context Menu Integration: Right-click any LWC file to preview without selecting from a list
Pin/Unpin Functionality: Lock preview to specific component
Status Bar Integration: Quick server status visibility and control
Org Integration: Preview LWCs in the context of your connected Salesforce org
Platform Data Access: Access org data through Lightning Data Service wire adapters, Apex controllers, and @salesforce scoped modules

Prerequisites

Install the Salesforce Extension Pack
Install the Salesforce CLI
Install the Local Dev CLI plugin

sf plugins install @salesforce/plugin-lightning-dev

Getting Started

Installation

Install the extension from the VS Code Marketplace or search for "Live Preview" in the VS Code Extensions view.

Usage

Automatic Server Start: The preview server starts automatically when you preview a component
Preview a Component:
- Via Command Palette: Open Command Palette (Cmd+Shift+P / Ctrl+Shift+P), run SFDX: Open in Lightning Preview, and select a component
- Via Context Menu: Right-click on any LWC file (.js, .html, or .css) in the Explorer and select "Open Lightning Component in Preview"
Preview Panel Controls:
- Pin/Unpin: Lock preview to current component
- Refresh: Reload current component
- Open in Browser: Launch in external browser
Server Management: Click the status bar item to toggle start / stop of the preview server