Why This Is Useful
You’ve built a Lightning Web Component. You go to the Lightning App Builder to drop it onto a record page. You open the Custom components section and… it isn’t there.
Nothing’s broken. Your component simply hasn’t told Salesforce it’s allowed on a record page yet, and by default a new LWC isn’t exposed to anything.
The fix lives in a file most people ignore.
The Code
Open your component’s .js-meta.xml file (so for myComponent, that’s myComponent.js-meta.xml) and make it look like this:
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>62.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__RecordPage</target>
</targets>
</LightningComponentBundle>Save it, let it deploy, and your component will be sitting there under the Custom tab in App Builder ready to drag onto the page.
Two things had to be true:isExposed must be true. New components default to false, which means they’re invisible to admins entirely. This one setting is the reason most people end up here.
You need at least one target. Exposed but with no targets still gets you nowhere.
The Other Targets
Record pages aren’t the only option, and you can list as many as you need:
<targets>
<target>lightning__RecordPage</target>
<target>lightning__AppPage</target>
<target>lightning__HomePage</target>
<target>lightningCommunity__Page</target>
<target>lightning__Tab</target>
</targets>One handy extra: if you’re on a record page, you almost certainly want the record’s Id. Add an @api recordId property to your JavaScript and Salesforce populates it automatically. No configuration needed, it just arrives.
import { LightningElement, api } from 'lwc';
export default class MyComponent extends LightningElement {
@api recordId;
@api objectApiName;
}Still Not Showing Up?
A quick checklist if it’s still hiding:
1. Did the save actually deploy? Check the Output panel in VS Code for errors.
2. Refresh App Builder. It caches the component list more aggressively than you’d like.
3. Check for a typo in the target name. They’re case sensitive and Lightning__RecordPage won’t work.
The full list of targets is in the LWC configuration file reference. Now go put your component on a page.
Get Coding With The Force Merch!!
We now have a redbubble store setup so you can buy cool Coding With The Force merchandise! Please check it out! Every purchase goes to supporting the blog and YouTube channel.
Get Shirts Here!
Get Cups, Artwork, Coffee Cups, Bags, Masks and more here!
Check Out More Coding With The Force Stuff!
If you liked this post make sure to follow us on all our social media outlets to stay as up to date as possible with everything!
Youtube
Patreon
Github
Facebook
Twitter
Instagram
Salesforce Development Books I Recommend
Advanced Apex Programming
Salesforce Lightning Platform Enterprise Architecture
Mastering Salesforce DevOps
Good Non-SF Specific Development Books:
Clean Code
Clean Architecture
