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 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.

1<?xml version="1.0" encoding="UTF-8"?>
2<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="myComponent">
3    <apiVersion>51.0</apiVersion>
4    <isExposed>true</isExposed>
5    <masterLabel>Component Name</masterLabel>
6    <description>Description of your component.</description>
7    <targets>
8        <target>lightningCommunity__Page</target>
9        <target>lightningCommunity__Default</target>
10    </targets>
11    <targetConfigs>
12        <targetConfig targets="lightningCommunity__Default">
13            <property type="String" name="stringProp" default="hello world"/>
14            <property type="Integer" name="integerProp" default="314"/>
15            <property type="Boolean" name="booleanProp" default="true"/>
16            <property type="Color" name="colorProp" default="#333333"/>
17            <property type="Picklist" name="picklistProp" datasource="item1,item2"/>
18        </targetConfig>
19    </targetConfigs>
20</LightningComponentBundle>

Always name your component properties using camel case, both in the .js file and the js-meta.xml file. Don’t capitalize the first letter because it can cause the component to break.

Note

The default value of the property in the js-meta.xml file determines the out-of-the-box value of a component property.

If no default is provided, then we use the value of the corresponding @api variable in the .js file. This value can then be further edited via the component’s property panel in Experience Builder.

When the component is loaded, we attempt to coerce the current value of a component property to its specified JavaScript type in the js-meta.xml file. If there’s no corresponding property at all in the js-meta.xml file and the attribute only exists in the .js file, then the value isn’t coerced.

Component @api properties with values containing expression language syntax (for example, {!recordId}) are only interpolated if there’s a corresponding design property config in the js-meta.xml file. See Make a Component Aware of Its Record Context in the Lightning Web Components Developer Guide.

LWR Sites for Experience Cloud

Component Properties