Configure a Component for Lightning App Builder

There are a few steps to take before you can use your custom Lightning web component on a Lightning page in Lightning App Builder.

1. Define Component Metadata in the Configuration File 

The componentName.js-meta.xml file defines the metadata values for the component, including the design configuration for components intended for use in Lightning App Builder. Edit the configuration file to:

  • Make your component usable in Lightning App Builder and in managed packages.
  • Define what types of Lightning pages your component can be used on.
  • Configure your component’s properties.
  • Set your component’s supported objects.

See the complete list of XML Configuration File Elements.

This sample configuration file makes the component available for all Lightning page types, but restricts support on record pages only for account, opportunity, and warehouse objects. The component has a different set of properties defined for record pages than for app and Home pages.

<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>47.0</apiVersion> <isExposed>true</isExposed> <masterLabel>Best Component Ever</masterLabel> <description>This is a demo component.</description> <targets> <target>lightning__RecordPage</target> <target>lightning__AppPage</target> <target>lightning__HomePage</target> </targets> <targetConfigs> <targetConfig targets="lightning__RecordPage"> <property name="prop1" type="String" /> <objects> <object>Account</object> <object>Opportunity</object> <object>Warehouse__c</object> </objects> </targetConfig> <targetConfig targets="lightning__AppPage, lightning__HomePage"> <property name="prop2" type="Boolean" /> </targetConfig> </targetConfigs> </LightningComponentBundle>

The object tag doesn't support external objects. For more information, see lightning__RecordPage Target.

When defining a component property, make sure that it has the same type assigned (String, Integer, Boolean) in the .js file and in the configuration file. If the assigned types don’t match, the type assignment from the configuration file takes precedence.

Note

2. Option: Add an SVG Resource to Your Component Bundle 

To include an SVG resource as a custom icon for your component in Lightning App Builder, add it to your component’s folder. It must be named componentName.svg. You can have only one SVG per folder.

See Also

The Summer '25 guide is now live

Looking for the Component Reference? Go to https://developer.salesforce.com/docs/component-library/.