@salesforce/lightning-out

Lightning Out 2.0 for Salesforce — embed Lightning components in any web application.

Installation

npm install @salesforce/lightning-out

Module Formats

The published package ships two formats:

• ES Modules (ESM) — dist/index.esm.js, tree-shakeable, resolved by main / module in package.json.
• IIFE — for direct browser use via <script>:
  • Production (minified): dist/index.iife.prod.js (also resolved by unpkg / jsdelivr)
  • Debug (unminified): dist/index.iife.debug.js

TypeScript declarations are shipped at dist/index.d.ts.

Usage

Importing the package (ESM) or loading the IIFE bundle registers the <lightning-out-application> custom element. You declare Lightning components to embed via the app's components attribute; each entry becomes a new custom element you can place inside the app.

ESM

// Named import (not bare) keeps bundlers from tree-shaking the module before its
// customElements.define() side effect runs (package.json declares sideEffects: false).
import { LightningOutApplication } from '@salesforce/lightning-out';

// Create and configure a Lightning Out application
const app = document.createElement('lightning-out-application');
app.setAttribute('frontdoor-url', 'https://your-org.my.salesforce.com/secur/frontdoor.jsp?sid=...');
app.setAttribute('components', 'c/myComponent');
document.body.appendChild(app);

app.addEventListener('lo.application.ready', () => {
    const component = document.createElement('c-my-component');
    // Attributes set here are mirrored into the underlying LWC in the iframe.
    component.setAttribute('title', 'My Component');
    component.setAttribute('some-prop', 'some-value');
    // Or set properties directly for non-string values:
    component.records = [{ id: 1, name: 'Alice' }];
    app.appendChild(component);
});

Use org-url instead of frontdoor-url when the user is already authenticated.

Declarative HTML (IIFE)

Declare the <lightning-out-application> in markup, then append the component after lo.application.ready fires. The application element must have no child nodes when it connects — its connectedCallback() throws otherwise.

<script src="https://unpkg.com/@salesforce/lightning-out/dist/index.iife.prod.js"></script>

<lightning-out-application
    id="app"
    frontdoor-url="https://your-org.my.salesforce.com/secur/frontdoor.jsp?sid=..."
    components="c/myComponent">
</lightning-out-application>

<script>
    const app = document.getElementById('app');
    app.addEventListener('lo.application.ready', () => {
        const component = document.createElement('c-my-component');
        component.setAttribute('title', 'My Component');
        component.setAttribute('some-prop', 'some-value');
        app.appendChild(component);
    });
</script>

API Documentation

Full attribute, event, property, and session-management reference: API-Syntax in the repo (also published to GitHub Pages — link on the repo's About panel).