Salesforce Live Preview installs statistics

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.
• Headless Experience Layer (HXL) Widgets (Beta): Preview HXL Widgets in a VS Code webview.

Documentation

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

Contributing to the Theme Manager brand-preview feature? See docs/theme-manager-local-dev.md for the two-repo setup, build order, and how to build/test the VSIX locally.

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

HXL Widgets (Beta)

• Live Widget Preview: Preview HXL Widgets directly within VS Code, with per-channel simulations
• Context Menu Integration: Right-click a widget bundle or its files and select SFDX: Open in Widget Preview to preview the widget
• Schema-Driven Sample Data: Sample attribute values are derived from the widget's schema.json, so preview data stays in sync with the widget's declared properties

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

1. Automatic Server Start: The preview server starts automatically when you preview a component

2. 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"

3. Preview Panel Controls:

   • Pin/Unpin: Lock preview to current component
   • Refresh: Reload current component
   • Open in Browser: Launch in external browser

4. Server Management: Click the status bar item to toggle start / stop of the preview server

Salesforce Multi-Framework UI Bundle Preview Usage

Prerequisites

1. 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.

1. 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):…