Lightning Web Components (LWC) is an enterprise-grade web components foundation for building user interfaces. LWC provides a simple authoring format for UI Components. LWC compiles this authoring format into low-level Web Component APIs. The lwc package is the main entry point for dependencies.

• Develop components quickly and declaratively using HTML, JavaScript, and CSS.
• Develop accessible components so that everyone can understand and navigate your app.
• Components are encapsulated in all browsers via the @jmsjtu/synthetic-shadow package, which polyfills the Shadow DOM.

Developing a Lightning web component is this easy.

counter
  ├──counter.css
  ├──counter.html
  └──counter.js

<!-- counter.html -->
<template>
    <p>Counter: {count}</p>
    <button onclick="{increaseCounter}">Add</button>
</template>

/* counter.css */
p {
    font-family: serif;
    font-size: large;
}

// counter.js
import { LightningElement } from 'lwc';

export default class Counter extends LightningElement {
    count = 0;

    increaseCounter() {
        this.count += 1;
    }
}

Supported Browsers

| Browser | Version | | ----------------------------- | ------- | | Microsoft® Internet Explorer® | IE 11* | | Microsoft® Edge | Latest | | Google Chrome™ | Latest | | Mozilla® Firefox® | Latest | | Apple® Safari® | 12.x+ |

For IE 11, LWC uses compatibility mode. Code is transpiled down to ES5 and the required polyfills are added. To develop components that run in IE 11, follow the compatibility mode linting rules.

Docs, Recipes, & Support

lwc.dev has all the information you need to develop components using LWC, including code recipes and code playgrounds.

Get started fast using the create-lwc-app tool.

npx create-lwc-app my-app
cd my-app
npm run watch

For support, use the lwc tag on Stack Overflow or the lightning-web-components tag on Salesforce Stack Exchange.

Release Notes

Changes are documented at github.com/salesforce/lwc/releases.