# Installation
Tip
If you aren't familiar with build tools but want to explore Lightning Web Components, start coding in the playground, which requires no installation. If you want help building a project, head to Trailhead and Build Apps with Lightning Web Components Open Source.
# 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.
Important
There are features documented at lwc.dev that aren't available to developers building Lightning web components on the Salesforce Platform. These features are marked with a note.
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
Browser | Version |
---|---|
Microsoft® Edge | Latest |
Google Chrome™ | Latest |
Mozilla® Firefox® | Latest |
Apple® Safari® | Latest |
# 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.
Tip
To learn JavaScript (or if you want a refresher), start with the Modern JavaScript Development Trailhead module. In just an hour and fifteen minutes, you're up-to-date and ready to develop Lightning web components.
# Release Notes
The LWC Release Notes are on GitHub: github.com/salesforce/lwc/releases.