Create a Sample Lightning Web Component

Create a sample custom component to deploy from SFDX to an authorized org. You can then reuse content from this Lightning web component file structure.

To display your LWR component in Experience Builder, you must specify target configuration values in the .js-meta.xml file. You can also make component properties editable in Experience Builder.

  1. In the Visual Studio Code editor, open the Command Palette by pressing Ctrl+Shift+P (Windows) or Cmd+Shift+P (macOS).

  2. Enter SFDX.

  3. Select SFDX: Create Lightning Web Component.

    Don’t select SFDX: Create Lightning Component, which creates an Aura component.

  4. Name the component, for example helloWorld.

  5. To accept the default force-app/main/default/lwc location, press Enter.

  6. To view the new files in Visual Studio Code Explorer, press Enter.

    Screenshot of Hello World LWC component in SFDX project.

  7. Open the HTML file (for example, helloWorld.html), and write or copy and paste the HTML code for your project.

  8. Save the file.

  9. Open the JavaScript file (for example, helloWorld.js), and write or copy and paste the JavaScript code for your project.

  10. Save the file.

  11. Open the XML file (for example, helloWorld.js-meta.xml), and write or copy and paste the XML code for your project.

  12. In the XML file, define the component design configuration values for Experience Builder.

    OptionDescription
    lightningCommunity__PageFor a custom drag-and-drop component on an LWR page in Experience Builder (appears in the Components panel).
    lightningCommunity__Page_LayoutFor a custom page layout component in an LWR site in Experience Builder (appears in the Page Layout Window).
    lightningCommunity__Theme_LayoutFor a custom theme layout in an LWR site in Experience Builder (appears in Settings in the Theme area).
    lightningCommunity__DefaultEnables editable component properties when the component is selected in Experience Builder. Supported property attribute types include integer, string, boolean, picklist, and color.

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

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

The snippet specifies a custom component for an LWR page in Experience Builder and also enables component property editing.