# Installation

# LWC Open Source

Lightning Web Components is an open-source UI framework developed at Salesforce. You can use LWC to customize Salesforce, but you can also use LWC to build any web app.

The LWC compiler and engine code available in the open-source repository is ahead of the code available on the Salesforce Platform. Most, but not all, LWC features are eventually released on the Salesforce Platform.

For more information, see Differences Between Building Lightning Web Components on Lightning Platform and Open Source.

# Lightning Web Components CLI

To create a Lightning Web Components project, use the open-source create-lwc-app tool.

To use the tool, you must have npx, which is a package runner. You must have Node.js 10+ installed with at least npm 5.2+. You should be familiar with either npm or yarn.

The tool guides you through a short setup and creates a Lightning Web Components project.

npx create-lwc-app my-app
cd my-app

Run yarn watch (or npm run watch depending on what you chose during the npx installation).

For information about component naming and bundle structure, see Component Bundles.

# Progressive Web Apps (PWA)

Depending on your use case, you may want to build a standard application using Lightning Web Components, or you may want to build a Progressive Web App (PWA). Although LWC is a web components framework and not directly related to PWAs, you can use the Lightning Web Components CLI to create a scaffolded PWA project.

To create a PWA project, use the create-lwc-app tool and append the -t pwa flag.

The following example showcases how to create such a project with the unattended installation flag --yes.

npx create-lwc-app my-app -t pwa --yes
cd my-app
npm run watch

# Use Lightning Web Components as Native Web Components

To register a Lightning web component as a custom element, use LightningElement.CustomElementConstructor, which is a static getter that can be accessed by any constructor that extends LightningElement.

In this example, the component name is component, and the namespace is namespace.

import NamespaceComponent from 'namespace/component';
customElements.define('namespace-component', NamespaceComponent.CustomElementConstructor);
// using tagName <namespace-component>
document.body.appendChild(document.createElement('namespace-component'));

To package and distribute your component, see Module Resolution.

# Tools

To develop Lightning web components, you can use just about any code editor and tools.

For code formatting, we recommend Prettier. Prettier supports HTML, CSS, and JavaScript, which are the files you write to create Lightning web components.

To install and use Prettier, see the official documentation. If you're using Git, it's a good idea to use a pre-commit hook to ensure that code is formatted before it's committed to source control.

To configure Prettier, add a configuration file to your project. To correctly format HTML templates with Prettier, set the parser to lwc. The parser is just HTML, but it tells Prettier not to add quotes around template properties in HTML attributes as required by LWC.

The following example sets all HTML files to use the lwc parser.

{
    "overrides": [
        {
            "files": "*.html",
            "options": { "parser": "lwc" }
        }
    ]
}

# Recipes

The github.com/trailheadapps/lwc-recipes-oss repo includes simple code recipes that teach you how to build apps. The recipes are used as code examples throughout this developer guide.

git clone https://github.com/trailheadapps/lwc-recipes-oss.git
cd lwc-recipes-oss

You can view some of the recipes in the Lightning Web Components recipes app: recipes.lwc.dev.

# Playground

The simplest recipe is the helloWorld component. The name property in the component's JavaScript class binds to the component's HTML template. Change World to Earth to see the binding in action.

Add another property in helloWorld.js.

@api greeting = 'Welcome to Lightning Web Components!'

Don't forget to add {greeting} in the helloWorld.html template.

The @api decorator makes the name property public. Because the name and greeting properties are public, a component that consumes the helloWorld component can set their values.

If we remove @api, the property still binds to the HTML template but it's private. To see for yourself, remove @api.

To learn more, see HTML Templates.

# Supported Browsers

# Supported JavaScript

To develop Lightning web components, use the latest versions of JavaScript. You can use any JavaScript feature that the browser supports.

The Salesforce engineers who developed Lightning Web Components are contributing members of the Ecma International Technical Committee 39 (TC39), which is the committee that evolves JavaScript. Salesforce is also a member of the World Wide Web Consortium (W3C).

This developer guide explains how to develop Lightning web components and documents the directives, decorators, and lifecycle hooks that are unique to LWC.

This developer guide doesn’t document standard JavaScript or teach JavaScript fundamentals. Standard JavaScript is documented in the Mozilla Developer Network (MDN) JavaScript Reference. If you’re looking for documentation for a function, try MDN first. For example, if you’re looking for information about addEventListener(), use MDN.

# Release Notes

The LWC Release Notes are on GitHub: github.com/salesforce/lwc/releases.