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 Value | Description |
|---|---|
| lightningCommunity__Page | Enables 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_Layout | Enables 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_Layout | Enables 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__Default |
Used 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:
|
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.