Get Started Coding

The fastest way to code your first Lightning web component is using a live code environment.

To get started with a simple component, we recommend the StackBlitz online IDE. Alternatively, use Salesforce DX tools to push LWC code to your org. LWC.studio was discontinued on January 1, 2024.

StackBlitz is a third-party product and is subject to its own terms and conditions. Salesforce is not responsible for the content, services, or paid options offered on StackBlitz. Your use of those websites and platforms is at your own risk and is subject to any applicable additional terms, such as the terms of service or privacy policies of the third party.

Use StackBlitz to kickstart your LWC development. StackBlitz doesn't have access to Salesforce data, but it's useful when you need to learn about LWC or reproduce a framework issue.

To create your first component on StackBlitz, go to https://playground.lwc.dev. You can use the online IDE without signing in. To save your changes, sign in using your GitHub account.

The default project includes a parent component x-app and a child component x-counter, where x is the namespace. To create a component:

  1. Hover over the x directory and click the Add Folder icon. Enter a name for your component, for example, myComponent.

  2. Hover over the myComponent directory and click the Add File icon. Enter the HTML file name, myComponent.html, which must match the directory name. Enter this sample code in the myComponent.html file.

  3. Hover over the myComponent directory and click the Add File icon. Enter the JS file name, myComponent.js, which must match the directory name. Enter this sample code in the myComponent.js file.

  4. In app.html, add <x-my-component></x-my-component> right after the <x-counter></x-counter> component tag.

  5. Save your changes and click the refresh icon in the preview area. "Hello LWC!" is displayed in the preview area.

For more information, see the StackBlitz documentation.

Using StackBlitz is a quick way to learn about LWC. Consider these guidelines when using the online IDE.

  • StackBlitz automatically updates to the latest open source version of LWC when you use playground.lwc.dev. This version is usually ahead of the LWC version in your Salesforce org. To verify the LWC version on StackBlitz, go to the package.json file and check the lwc value on the devDependencies object. For example, an lwc value of 3.6.0 corresponds to the v3.6.0 OSS release. See LWC API Versioning.
  • StackBlitz provides LWC features that are both available on the Salesforce platform and LWC OSS. However, It doesn't have access to your Salesforce data. For example, it doesn't support @salesforce/* imports and Lightning Data Service wire adapters.
  • StackBlitz projects don't include SLDS and base components. Live examples specific to base components are available in the Component Reference.

While the online IDEs are helpful to get started with LWC, we recommend that you set up your development environment on your local machine to start building Lightning web components in your Salesforce org. To keep coding, jump to Data Binding in a Template. Have fun!

See Also