UI Embedding Recipes

Explore working sample apps that embed a web app in Salesforce with lightning-ui-embedding. The recipes show complete, runnable patterns you can read, run in a scratch org, and adapt for your own app, so you don’t start from a blank file.

The samples live in the Multi-Framework Recipes repository on GitHub, trailheadapps/multiframework-recipes, alongside recipes for other ways to bring web frameworks into Salesforce.

The UI Embedding samples live in the microfrontend-recipes folder of that repository, which is a Developer Preview. Developer Preview samples show the approach, but the API surface they use can differ from the generally available lightning-ui-embedding component. Read them as patterns to learn from, and follow Get Started with UI Embedding for the generally available API.

Note

What You Can Learn

The recipes show how to:

Embed an externally hosted app on a Salesforce page with a thin Lightning web component wrapper.
Read host-driven data and UI state in the embedded app, and send events back to the host.
Access Salesforce data indirectly through a host Lightning web component rather than from inside the embedded app.
Compare the embedding approach with a native Lightning web component alternative for full-screen and inline layouts.

Before You Start

The repository README lists the current prerequisites and setup, including the Node.js and Salesforce CLI versions, how to create the scratch org, and any optional tooling. Follow the README, because the exact versions change over time.

Use the Recipes

Open the trailheadapps/multiframework-recipes repository on GitHub.
Follow the README to install the prerequisites and create the scratch org.
Open the microfrontend-recipes folder and run the sample you want to study.
Compare the sample against Get Started with UI Embedding so you build on the generally available API.

UI Embedding Recipes

What You Can Learn

Before You Start

Use the Recipes

See Also