---
schema_version: "1"
id: 896d9e9c8299b8f40378201a16b53652fb52ceb3b98dd064d28d30d0037defd4
title: Create a Sample Lightning Web Component
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/commerce-cloud/salesforce-commerce/guides/d2c-commerce/b2b-b2c-comm-create-sample-lwc.md
canonical_url: https://developer.salesforce.com/docs/commerce/salesforce-commerce/guide/b2b-b2c-comm-create-sample-lwc.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 44e749a039d5e0270a1388f7e77b512b7c73e64514da3a1efe8843b7e53d1da5
products:
  - B2B Commerce Developer Guide
  - Salesforce APIs
---
# 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://developer.salesforce.com/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.html).

    | 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)