Create Components for LWR Sites

Each Lightning web component folder must include a configuration file named <component>.js-meta.xml. The configuration file defines the metadata values for the component, including the design configuration values for Experience Builder.

If you previously created Lightning web components for Experience Builder sites, you’re familiar with the lightningCommunity__Page and lightningCommunity__Default targets. For the LWR template, we added two new target types—lightningCommunity__Page_Layout and lightningCommunity__Theme_Layout.

Target ValueDescription
lightningCommunity__PageEnables a drag-and-drop component to be used on an LWR or Aura site page in Experience Builder. Components appear in the Components panel.
lightningCommunity__Page_LayoutEnables a component to be used as a page layout in an LWR site in Experience Builder. Components appear in the Page Layout window.
lightningCommunity__Theme_LayoutEnables a component to be used as a theme layout in an LWR site in Experience Builder. Components appear in Settings in the Theme area.
lightningCommunity__DefaultUsed together with lightningCommunity__Page or lightningCommunity__Theme_Layout. Enables a component to expose properties that are editable when the component is selected in Experience Builder.
For Experience Builder sites, only lightningCommunity__Default supports configurable component properties. We support these property attribute data types:
  • Integer
  • String
  • Boolean
  • Picklist
  • Color

To use a component in Experience Builder, edit the <component>.js-meta.xml file to define the component’s design configuration values as follows.

  • To make your component usable in Experience Builder, set isExposed to true, and define lightningCommunity__Page, lightningCommunity__Page_Layout, or lightningCommunity__Theme_Layout in targets.
  • To include properties that are editable when the component is selected in Experience Builder, define lightningCommunity__Default in targets and define the properties in targetConfigs.

See Configure a Component for Experience Builder in the Lightning Web Components Developer Guide.

All configuration file tags listed in Configuration File Tags in the Lightning Web Components Developer Guide are supported.

  • Component Properties

    Let’s look at some sample code for a Lightning web component that includes four editable properties. lightningCommunity__Page tells Experience Builder that this component is a drag-and-drop component. And the lightningCommunity__Default target is used to configure any design-time component properties for Experience Builder in its targetConfig.

  • Base Lightning Component Limitations in LWR Sites

    In LWR sites for Experience Cloud, you can use most of the components in the Lightning Component Library, but there are some limitations.

  • User Interface API

    User Interface API allows you to get Salesforce record data into your Lightning web component. LWR sites don’t require anything special when developing your Lightning web components with User Interface API.

  • @salesforce Modules in LWR Sites

    LWR sites in Experience Cloud support @salesforce modules, which add functionality to Lightning web components at runtime.

  • Lightning Navigation

    Use the lightning/navigation API to navigate to different pages within your site, generate URLs to different routes, and get the current pageReference object.

  • Make a Custom Lightning Web Component Screen-Size Responsive

    For enhanced LWR sites, you can assign separate values for the desktop, mobile, and tablet versions of certain properties in custom Lightning web components. With screen-responsive properties, the component uses the correct property value based on the end user’s screen size.