XML Configuration File Elements

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

Want to check out sample configuration files? The lwc-recipes repo contains components with configuration files, like this one for the eventSimple example component. Look for .js-meta.xml configuration files in the component bundles in force-app/main/default/lwc.

Salesforce API version 45.0 or higher. Regardless of apiVersion, the component always uses the latest version of Lightning Data Service and base Lightning components. The Lightning Locker version is set at the org level, and isn't related to the component apiVersion.

A capability is something that a component can do, as opposed to a target, which defines where you can use a component.

Supports the capability subtag.

Valid values are:

Value	Description
`lightningCommunity__RelaxedCSP`	Enables a component installed from a managed package to run in an Experience Builder site that has Lightning Locker disabled. This setting allows managed package developers to opt in to running their Lightning web components in a site with Lightning Locker disabled. Lightning web components in a managed package that don’t include the `lightningCommunity__RelaxedCSP` tag are disabled in the Components panel in Experience Builder for any site with Lightning Locker disabled.
`lightning__ServiceCloudVoiceToolkitApi`	Enables a component to use the Service Cloud Voice Toolkit API. A component that uses the `lightning-service-cloud-voice-toolkit-api` component must specify the `lightning__ServiceCloudVoiceToolkitApi` capability. For more information, see the `lightning-service-cloud-voice-toolkit-api` documentation.
`lightning__dynamicComponent`	Enables a component to dynamically instantiate other components.

A short description of the component, usually a single sentence. The description appears in list views, like the list of Lightning Components in Setup, and as a tooltip in Lightning App Builder and Experience Builder.

If isExposed is false, the component isn’t exposed to Lightning App Builder or Experience Builder.

To allow the component to be used in Lightning App Builder or Experience Builder, set isExposed to true and define at least one <target>, which is a type of Lightning page.

A custom Lightning web component can’t access a Lightning web component or module in a custom namespace. It can access Lightning web components and modules only in the c and lightning namespaces.

The title of the component. Appears in list views, like the list of Lightning Components in Setup, and in the Lightning App Builder and in Experience Builder.

The namespace of the managed package of your Vlocity Lightning web components. See Salesforce Help: Vlocity User Interaction Tools.

Specifies where the component can be added, such as on a type of Lightning Page or in Embedded Service Chat. If you want your component to appear in the Lightning App Builder or in Experience Builder, specify at least one Lightning page type.

Supports the target subtag.

A page type. Valid values are:

Value	Description
`lightningCommunity__Default`	Enables a component in Experience Builder to expose editable properties when the component is selected. Only properties defined for the `lightningCommunity__Page` or `lightningCommunity__Theme_Layout` targets are editable in Experience Builder.
`lightningCommunity__Page`	Enables a drag-and-drop component to be used on a page in Experience Builder. Components appear in the Components panel.
`lightningCommunity__Page_Layout`	Enables a component to be used in Experience Builder as a page layout for an LWR site. Components appear in the Content Layout window.
`lightningCommunity__Theme_Layout`	Enables a component to be used in Experience Builder as a theme layout for an LWR site. Components appear in Settings in the Theme area.
`lightningSnapin__ChatHeader`	Enables a custom chat header component to be selected from Embedded Service Chat Setup. A component that imports the `lightningsnapin/baseChatHeader` module must specify that `lightningSnapin__ChatHeader` target. For more information, see the `lightningsnapin/baseChatHeader` documentation.
`lightningSnapin__ChatMessage`	Enables a custom chat message component to be selected from Embedded Service Chat Setup. A component that imports the `lightningsnapin/baseChatMessage` module must specify the `lightningSnapin__ChatMessage` target. For more information, see the `lightningsnapin/baseChatMessage` documentation.
`lightningSnapin__Minimized`	Enables a custom minimized component to be selected from Embedded Service Chat Setup. A component that imports the `lightningsnapin/minimized` module must specify the `lightningSnapin__Minimized` target. For more information, see the `lightningsnapin/minimized` documentation.
`lightningSnapin__PreChat`	Enables a custom prechat component to be selected from Embedded Service Chat Setup. A component that imports the `lightningsnapin/basePrechat` module must specify the `lightningSnapin__PreChat` target. For more information, see the `lightningsnapin/basePrechat` documentation.
`lightningStatic__Email`	Enables a component to be used in and Email Content Builder.
`lightning__AppPage`	Enables a component to be used on an App page in Lightning App Builder.
`lightning__FlowScreen`	Enables a component to be used on flow screens in Flow Builder.
`lightning__HomePage`	Enables a component to be used on a Home page in Lightning App Builder.
`lightning__Inbox`	Enables a component to be used in Lightning App Builder to add to email application panes for the Outlook and Gmail integrations.
`lightning__RecordAction`	Enables a component to be used as a quick action on a record page. To specify the type of quick action, define a `targetConfig` with an `actionType` attribute.
`lightning__RecordPage`	Enables a component to be used on a record page in Lightning App Builder.
`lightning__Tab`	Enables a component to be used in a custom tab in Lightning Experience or the Salesforce mobile app.
`lightning__UtilityBar`	Enables a component to be used as a utility item on the utility bar in the App Manager.
`lightning_VoiceExtension`	Enables a component to be used on a Voice Extension page in Lightning App Builder.
`analytics__Dashboard`	Enables a component to be used as a widget in a CRM Analytics dashboard.

Configure the component for different page types and define component properties. For example, a component could have different properties on a record home page than on the Salesforce Home page or on an app page. For Experience Builder sites, only lightningCommunity__Default supports component properties.

Supports the targetConfig subtag.

Use a separate targetConfig for each different page type configuration. The targetConfig tag supports these attributes:

Attribute	Description	Required
`actionType`	Specify the type of Lightning web component quick action. The supported types are `ScreenAction` and `Action`. The default value is `ScreenAction`. See Configure a Component for Quick Actions. Only supported if the `target` is `lightning__RecordAction`.	No
`configurationEditor`	Registers a custom property editor for a flow screen component. A custom property editor is a Lightning web component that provides a custom UI for configuring a custom flow screen component’s input attributes. See Customize Action and Screen Component UI in Flow Builder. Only supported if the `target` is `lightning__FlowScreen`.	No
`targets`	Specify one or more page types in the `targets` attribute, such as `<targetConfig targets="lightning__RecordPage">` or `<targetConfig targets="lightning__RecordPage,lightning__AppPage">`. The `targets` attribute value that you specify must match one or more of the page types that you listed under `<targets>` for the component.	Yes

The targetConfig tag supports these subtags.

event
property
propertyType
objects
schema
supportedFormFactors
hasStep

These subtags support various attributes and subtags.

Exposes an event for Dynamic Interactions, which allows it to appear on the Events tab in the Lightning App Builder component property panel.

This tag is only supported if the target is lightning__AppPage.

The event tag supports these attributes:

Attribute	Description	Required
`description`	The description of the event. Appears as an i-bubble on the event label in Lightning App Builder.	No
`label`	The admin-friendly label for the event.	No
`name`	The name of the event as defined in the `.js` file. If no `label` attribute is defined, the `name` value is shown in the list of available events for the component in Lightning App Builder.	Yes

Specifies a public property of a component that can be set in Lightning App Builder, App Manager, Flow Builder, or Experience Builder. The component author defines the property in the component’s JavaScript class using the @api decorator.

The property tag supports these attributes:

Attribute	Description	Required
`datasource`	Renders a field as a picklist, with static values. Supported only if the `type` attribute is `String`. Not supported if the `target` is `lightning__FlowScreen`. For example: `datasource="value1,value2,value3"`. You can also set the picklist values dynamically using an Apex class, such as: `datasource="apex://MyCustomPickList"`. For more information, see Create Dynamic Picklists for Your Custom Components.	No
`default`	The default value for the attribute	No
`description`	Displays as an i-bubble for the attribute in the tool.	No
`exposedTo`	Required if you use the `screenResponsive` attribute. The valid value is `css`.	No
`filter`	Supported only if the target is `lightningCommunity__Default` and the type is `ContentReference`. Specifies the Salesforce CMS content type to display in the component in Experience Builder. Valid values are: `cms_document` `cms_image` `cms_video` `news` `custom_type`, where `custom_type` is the name of a custom content type	No
`label`	Displays as a label for the attribute in the tool.	No
`max`	The maximum allowed value for an attribute of type `Integer`. Not supported if the `target` is `lightning__FlowScreen`.	No
`min`	The minimum allowed value for an attribute of type `Integer`. Not supported if the `target` is `lightning__FlowScreen`.	No
`name`	Required if you’re setting properties for your component. The attribute name. This value must match the property name in the component’s JavaScript class.	Yes
`placeholder`	Input placeholder text for the attribute when it displays in the tool. This text is the ghost text in text fields and text areas before a user starts typing. Supported only if the `type` attribute is `String`. Not supported if the `target` is `lightning__FlowScreen`.	No
`required`	Specifies whether the attribute is required. The default value is `false`.	No
`role`	Specifies whether the attribute is `inputOnly` or `outputOnly`. If you don't specify the `role` attribute, the default value allows input and output. For example, if a property is restricted to `outputOnly`, users can't set its value from a Lightning record page. Supported only if the `target` is `lightning__FlowScreen`. If you don't set the `role` attribute, or if you set it to `inputOnly`, the property is exposed in a custom property editor. If you set it to `outputOnly`, the property isn't exposed in a custom property editor.	No
`screenResponsive`	Specifies if a component integer or string property is screen-size responsive. The default value is `false`. To allow the component to use the correct property value based on the user's screen-size, set `screenResponsive` to `true` and set the `exposedTo` attribute to `css`. `screenResponsive` is supported only if the target is `lightningCommunity__Default`.	No
`type`	The attribute's data type. The following values are valid for all targets. Make sure that this value matches the type assigned to the property in the component's JavaScript module. If the types don't match, the value in the configuration file takes precedence. `Boolean` `Integer` `String` These values are valid if the target is `lightningCommunity__Default`. `Color` - Displays a color selector. Use the `default` attribute to specify RGBA, RGB, or hex strings. For example: `<property type="Color" name="backgroundColor" default="rgba(0, 255, 255, 1)" />`. `ContentReference` - Displays a window in Experience Builder for selecting Salesforce CMS content. You can use the `filter` attribute to restrict the window contents to specific content types. For example: `<property type="ContentReference" name="contentId" label="Content ID" filter="cms_image, cms_video" />`. These values are valid if the target is `lightningStatic__Email`. `Color` - Displays a color selector. Use the `default` attribute to specify RGBA, RGB, or hex strings. For example: `<property type="Color" name="backgroundColor" default="rgba(0, 255, 255, 1)" />`. `HorizontalAlignment` - Displays a horizontal alignment selector. Use the `default` attribute to specify a `right`, `left`, or `center` alignment value. `VerticalAlignment` - Displays a vertical alignment selector. Use the `default` attribute to specify a `top`, `middle`, or `bottom` alignment value. These values are valid only if the target is `lightning__FlowScreen`. `apex://namespace.Classname` - An Apex class used for an Apex-defined data type. If the class is in the same namespace as the component, don't specify a namespace. If the class is in a managed package, specify the namespace of the managed package. `Date` - A date in ISO 8601 format. `DateTime` - A datetime in ISO 8601 format. `@salesforce/schema/namespace__Objectname` or `@salesforce/schema/Objectname` - An object.	Yes

Defines a data type to extend for component properties in flow screen components. Only generic sObject and sObject collection data types can be extended.

Supported only if the target is lightning__FlowScreen.

Attribute	Description	Required
`extends`	Specifies the data type to extend for component properties.	Yes
`description`	Description of the property type.	No
`label`	Label of the property type.	No
`name`	Specifies the data type name to reference from each `type` attribute that is defined in a component’s `property` subtag. See Example: Generic SObject Input for Screen Components	Yes

Limits the component to a set of one or more objects. If you don’t use this tag set, the component supports all supported objects. This tag set works only inside a parent targetConfig that’s configured for lightning__RecordPage.

Specify the objects tag set only one time inside a targetConfig set.

Supports the object subtag.

Defines which objects the component is supported for. Use one object tag for each supported object.

See the User Interface API Developer Guide for the list of supported objects.

Provides the shape of an event. Content in the schema tag must be in JSON format.

The Dynamic Interactions feature uses only type and properties from the schema. All other items in the schema are ignored. In the event schema, valid property types are String, Integer, and Boolean. For an example schema, see Configure a Component for Dynamic Interactions in the Lightning App Builder.

Supported only if the target is lightning__AppPage.

A set of one or more form factors or devices that the component supports. Specify the supportedFormFactors tag set one time inside a targetConfig set. Supports the supportedFormFactor subtag.

supportedFormFactors doesn’t work for these targets:

lightningCommunity__Default
lightningCommunity__Page
lightningCommunity__Page_Layout
lightningCommunity__Theme_Layout

Defines which form factor or device the component supports. Use one supportedFormFactor tag for each supported form factor.

The supportedFormFactor tag supports these attributes:

Attribute	Description	Required
`type`	Device form factor on which the component displays. Valid values are: `Large`—Represents the desktop form factor. Supported for all page types. `Small`—Represents the phone form factor. Supported for `lightning__AppPage` and `lightning__RecordPage` only.	Yes

We strongly recommend including supported form factor information in the configuration file for all your components. See Configure Your Component for Different Form Factors.

Provides CRM Analytics query data from a dashboard step to the component. This tag works only with the analytics__Dashboard target. The hasStep tag is a boolean setting, with a default value of false.

See Also