---
schema_version: "1"
id: f7fcf1f1ba4fc94695bd699059d3f8e402840e066472b84292ec65c8533ea479
title: Embed External Web Apps in Salesforce with Micro-Frontends (Developer Preview)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/release-notes/262-0-0/rn_mfe_enablement.md
canonical_url: https://help.salesforce.com/s/articleView?id=release-notes.rn_mfe_enablement.htm&release=262.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: c426da2f8f30617490e24908744ea13ec9b2ac214dd192aa9182302466df5a4e
description: Embed existing React, Angular, Vue, or JavaScript web apps in Salesforce pages without rewriting them. Micro-Frontend (MFE) runs your web app in a secure, sandboxed iframe with built-in communication, and lets you deploy updates independently of Salesforce releases.
products:
  - Cross Cloud
release: "262"
---
# Embed External Web Apps in Salesforce with Micro-Frontends (Developer Preview)

Embed existing React, Angular, Vue, or JavaScript web apps in Salesforce pages without rewriting them. Micro-Frontend (MFE) runs your web app in a secure, sandboxed iframe with built-in communication, and lets you deploy updates independently of Salesforce releases.

**Where:** This change applies to Lightning Experience, Experience Builder sites, and Experience Cloud LWR sites in all editions.

![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-release-notes-salesforce_release_notes-262-0-0-production-enus/e945111b-3e0a-4011-accc-d5949363bfcc/images/icon_note.png)

Note The Dev Channel provides access to features that are not generally available and have been designated as pilot, beta, limited release, or developer preview. Their use is at the Customer's sole discretion and is subject to the Beta Services Terms at [Agreements - Salesforce.com](https://www.salesforce.com/company/legal/).

**Why:** Teams that build with modern web frameworks no longer need to rewrite in LWC to ship inside Salesforce. Deploy framework-native code into Salesforce pages while the platform handles security isolation, cross-frame communication, and lifecycle management. Deploy and update your embedded components on your own schedule without waiting for Salesforce releases.

**How:** To set up Micro-Frontends:

1. Deploy the `@sf-embedding/experimental-mfe-lwc-shell` package as an LWC entity in your org. To deploy:
    1. Install the package in your SFDX project: `npm install --save-dev @sf-embedding/experimental-mfe-lwc-shell` version 2.2.1-rc.5 or above.
    2. Generate the vendor component by running: `npx lwc-shell-vendor-build` (this creates a deployable LWC at force-app/main/default/lwc/vendorLwcShell/).
    3. Deploy the vendor component to your org: `sf project deploy start --source-dir force-app/main/default/lwc/vendorLwcShell`.
2. In Setup, add your widget's domain to **CSP Trusted Sites** so that Salesforce can load resources from your app's domain inside the iframe.
3. Create a wrapper LWC with a `lwc:dom="manual"` container element.
4. In the wrapper's JavaScript, create the `<lwc-shell>` element imperatively. Set `sandbox`, `title`, and `src` attributes before appending the element to the container.
    
    ```
    const shell = document.createElement('lwc-shell');
    shell.sandbox = 'allow-forms allow-modals';
    shell.title = 'Product Registration';
    shell.src = 'https://widget.example.com/register';
    container.appendChild(shell);
    ```
5. In your external widget app, install the `@salesforce/experimental-mfe-bridge` version 2.2.1-rc.2 npm package (the MFE Bridge). The bridge handles data exchange, theming, and events across the iframe boundary.

The iframe runs in a restricted sandbox with a three-tier security model:

- **Base tokens (always applied):** `allow-scripts`, `allow-pointer-lock`, `allow-same-origin`
- **Optional tokens (opt-in via sandbox attribute):** `allow-forms`, `allow-modals`, `allow-downloads`
- **Blocked tokens (never allowed):** `allow-top-navigation`, `allow-popups`

![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-release-notes-salesforce_release_notes-262-0-0-production-enus/e945111b-3e0a-4011-accc-d5949363bfcc/images/icon_note.png)

Note As `lwc-shell` is a third-party component, having `allow-same-origin` as a sandbox token only works on Experience sites when Locker/LWS is disabled. This will be addressed in the GA version as `lwc-shell` will be provided as a first-party component.