Salesforce Live Preview for Visual Studio Code

Overview

The Salesforce Live Preview extension enables you to preview Lightning Web Components (GA) and Saleforce Multi-Framework UI Bundles (Beta) 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.

Supported Preview Types:

Lightning Web Components (GA): Preview Lightning Web Components in a VS Code webview.
Salesforce Multi-Framework UI Bundles (Beta): Preview React, Vue, Angular, and other UI bundles with dev server integration.

Documentation

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

Features

Lightning Web Components (LWC)

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

Salesforce Multi-Framework (Beta)

UI Bundle Preview: Preview UI bundles (React, Vue, Angular) with Salesforce authentication directly in VS Code
Integrated Webview Panel: Opens preview in a VS Code webview panel (not external browser)
Automatic Proxy: Automatically proxies requests to Salesforce orgs
Dev Server Integration: Works with any framework's dev server
Org Authentication: Seamless integration with Salesforce org authentication

Prerequisites

Install the Salesforce Extension Pack
Install the Salesforce CLI

For LWC Preview

Install the Local Dev CLI plugin:

sf plugins install @salesforce/plugin-lightning-dev

For Salesforce Multi-Framework UI Bundle Preview

Install the UI Bundle CLI plugin:

sf plugins install @salesforce/plugin-ui-bundle-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

Salesforce Multi-Framework UI Bundle Preview Usage

Prerequisites

Create a ui bundle in the SFDX project structure:

my-sfdx-project/
├── sfdx-project.json
└── force-app/main/default/uiBundles/
    └── my-app/
        ├── my-app.uibundle-meta.xml
        ├── package.json
        ├── src/
        └── ui-bundle.json

Note: The {name}.uibundle-meta.xml file is required to identify a valid ui bundle. The ui-bundle.json is optional - if not present, the extension defaults to npm run dev command.

Optional: Create ui-bundle.json for custom dev configuration:

Field	Type	Description	Default
`dev.command`	string	Command to start dev server. When set, CLI starts the server; URL defaults to `http://localhost:5173` unless overridden.	`npm run dev`
`dev.url`	string	Dev server URL. Command mode: Override default 5173 if needed. URL-only mode (no command): Required—CLI assumes server is already running and does not start it.	`http://localhost:5173`

Command mode (CLI starts dev server):

{ "dev": { "command": "npm run dev" } }

URL-only mode (you start dev server yourself):

{ "dev": { "url": "http://localhost:5173" } }

Ensure you have a Salesforce org authenticated (default org will be used)

Starting Salesforce Multi-Framework UI Bundle Preview

Via Command Palette:
- Open Command Palette (Cmd+Shift+P / Ctrl+Shift+P)
- Run SFDX: Open in Live Preview
- The extension will automatically detect ui bundles in force-app/main/default/uiBundles/
- Select a ui bundle from the picker
Via Context Menu:
- Right-click on any .js, .jsx, .ts, or .tsx file (non-LWC)
- Select "SFDX: Open in Live Preview"
What Happens:
- The extension runs sf ui-bundle dev --name <ui-bundle-name> --target-org <your-org>
- A proxy server starts (default port: 4545)
- Your dev server starts (based on ui-bundle.json configuration or defaults)
- The extension waits for the "Ready for development!" signal from the CLI
- Salesforce authentication is automatically injected
- A Live Preview panel opens in VS Code with your ui bundle
- Use the Refresh button in the panel toolbar if content doesn't load initially
- Use the Open in Browser button to launch in an external browser with full Salesforce API access

Debug Logging

The extension includes comprehensive debug logging to help diagnose issues in production environments.

Enabling Debug Logging

Open VS Code Settings (Cmd+, / Ctrl+,)
Search for "Live Preview"
Set Salesforce Live Preview: Log Level to your desired level (trace, debug, info, warn, error)
Set to none to disable logging

Viewing Debug Logs

Logs are written to the Live Preview output channel:

Open the Output panel (Cmd+Shift+U / Ctrl+Shift+U)
Select "Live Preview" from the dropdown

Log Levels

trace: Most verbose, includes method entry/exit traces
debug: Detailed diagnostic information
info: General informational messages (default)
warn: Warning messages for potentially problematic situations
error: Error messages for failures and exceptions
none: Disable all logging

What Gets Logged

Debug logging captures:

Server lifecycle events (start, stop, status changes)
Authentication events and org connections
Default org changes (important when preview server is running)
HTTP requests and proxy routing
Configuration changes
Process spawning and termination
Error stack traces and diagnostics

Note: Sensitive data (tokens, passwords, API keys) is automatically redacted from logs.