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

:::note
To display your LWR component in Experience Builder, you must specify target and capability 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.](https://a.sfdcstatic.com/developer-website/sfdocs/commerce-cloud/media/d2c-commerce/helloWorld_lwc.png)

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. See [XML Configuration File Elements](https://developer.salesforce.com/docs/platform/lwc/guide/reference-configuration-tags.md).

    | Option                                   | Description                                                                                                                                                                           |
    | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
    | ***`lightningCommunity__Page`***         | For a custom drag-and-drop component on an LWR page in Experience Builder (appears in the Components panel).                                                                          |
    | ***`lightningCommunity__Page_Layout`***  | For a custom page layout component in an LWR site in Experience Builder (appears in the Page Layout Window).                                                                          |
    | ***`lightningCommunity__Theme_Layout`*** | For a custom theme layout in an LWR site in Experience Builder (appears in Settings in the Theme area).                                                                               |
    | ***`lightningCommunity__Default`***      | Enables 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`.

    3. [Lightning Locker and Lightning Web Security (LWS)](https://developer.salesforce.com/docs/atlas.en-us.communities_dev.meta/communities_dev/communities_dev_security_locker_csp.htm) are disabled in B2B and D2C store LWR templates. To configure the component to run without Lightning Locker or LWS, define `{lightningCommunity__RelaxedCSP}` in `capabilities`.

## Example

The snippet specifies a custom component for an LWR page in Experience Builder, enables component property editing, and enables the component to run without Lightning Locker or LWS.

```nolang

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentHelloWorld xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>59.0</apiVersion>
     <isExposed>true</isExposed>
    <targets>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
    </targets>
    <capabilities>
        <capability>lightningCommunity__RelaxedCSP</capability>
    </capabilities>
</LightningComponentHelloWorld>
```

**See Also**

- [Deploy a Custom Component](https://developer.salesforce.com/docs/commerce/salesforce-commerce/guide/b2b-b2c-comm-deploy-lwc-component.htm)