harshlive / awesome-lwc

A list of interesting on platform Lightning Web Components resources and code examples

Awesome LWC

A list of interesting Lightning Web Components resources and code examples

Most of this repo is for "On platform" means resources specific to the SFDC platform, and but LWC Open Source items are included as well.

Feel free to Fork, PR, and contribute to this list. For JS Library suggestions, try to suggest why it's a useful tool for the SFDC Landscape.

Join the SFXD Discord Community!

---

On Platform Community Repos

• LWCC

  Simple yet flexible charting Lightning Web Component using Chart.js for admins & developers

• Timeline (Dave Norris, @deejay-hub)

  An interactive timeline for the Salesforce platform. https://medium.com/@dave_norris

• LWC Utils and Design Patterns (James Hou, @tsalb)

  A set of utilities and patterns for Flexipage SPAs.

• Lightning Chatter Messenger (Shun Kosaka, @shunkosa)

  An utility item to support real time private chatter conversations.

• Salesforce-Custom-Path-Assistant-LWC (Marco Zeuli, @maaaaarco)

  A custom path assistant built using only Lightning Web Components

• User Interactions with Platform Events and LWC (Luciano Straga, @lucianostraga)

  An user interaction tracker with Lightning Web Components and Platform Events for Lightning Experience and Communities

• LWC Listview (Menachem Lazaroff, @shliachtx)

  A dynamic datatable for use in flexipages or standalone

• Salesforce Lookup Component (Lightning Web Component version) (Philippe Ozil, @pozil)

  A generic & customizable lookup component built using Salesforce Lightning Web Components and SLDS style.

• LWC-Lookup-Datatable (Salesforce Discord Exchange , @SFDX, Atlas Can @AtlasCan)

  A lookup component with results as an editable two part datatable.

• lwc-lookup (Justin Lyon, @jlyon87)

  An SObject Generic Lookup field with LWC

• lwc-metadata-picker (Justin Lyon, @jlyon87)

  A Custom Metadata Lookup field that allows to filter by a picklist.

• Dynamic Multi Row Editable Tables using LWC (Sean Cuveo, @seanpat09)

  A dynamic multi-line input table using LWC

• One PubSub (Vishnu Kumar, @TheVishnuKumar)

  A Declarative PubSub Library for Lightning Web Component and Aura Component

• LWC Signature Pad (@samkhan27)

  A signature pad for drawing smooth signatures in Lightning Web Components(LWC) applications.

• Polyglot (Ruslan Kurchenko, @ruslan-kurchenko)

  Salesforce Lightning Web Component to facilitate multilingual applications development

• LWC Files Related List (Suraj Pillai, @surajp)

  Salesforce Lightning Web Component to display files related to a record in a data table, with previews on hover, and ability to view, download and upload multiple versions of the same file without navigating away from the record page.

• LWC Stencil (@gavignon)

  Lightning Web Component used for Skeleton Loading LDS Ref.

• SLDS Illustration Cmp (@kacrouse)

  The SLDS Illustration component blueprint as a Lightning Web Component. Also usable in Lightning App Builder.

• LWC Confirmation Dialog (@marcoalmodova)

• LWC Component COVID19 (Alfian Busyro, @arufian)

  A LWC component that can be embedded into Account and Contact record page, which will show all COVID-19 statistics data based of Account's and Contact's respective country.

• LWC JS Button (@surajp)

  JavaScript buttons that work in Lightning!

• Payment Form (@rapsacnz)

  A form that takes credit card and address information. Uses a ported version of jessie pollack's card component.

• LWC Style Distributor (@foxcreation)

  Style Distributor Lightning Web Component for Salesforce.

• Apex Continuations (LWC and Aura) (@victorgz)

  Examples of the implementation and testing of Apex Continuations in LWC and Aura

• LWC Modal (@jamessimone)

  Accessible, composable modal for Salesforce.com (SFDC)'s Lightning Web Components (LWC) system

• LWC Paginator (@jamessimone)

  Composable pagination LWC

• lightning-wizard (@jmpisson)

  Wizard component for building flows with LWC

• Indicators (@JodieM)

  Indicators for LWC

• Confirmation Dialog (@surajp)

  LWC Confirmation Dialog

---

Locker Safe JS Resources

Goal of this section is to highlight Locker Safe resources that can enhance your LWC.

As the Locker Service adjusts, I'll revisit this section to add resources that might become available.

• Moment JS

• Chart JS JS Charing Libray.

• D3, a data visualization library.

  • C3, a charting library dependent on D3.

• ParaParse, a CSV parser, handles sloppy input and big files. (Use this).

• Leaflet Mobile friendly maps.

• Chroma.js Color manipulation library, useful with D3/Chart JS.

• Signature Pad HTML5 Canvas for accepting signatures.

---

Official Examples

• Salesforce Sample Gallery
• LWC Recipes
• On Platform Base Components

---

Interesting Posts, Blogs, and Sites

JEST related posts

These are fairly random scribbles, just notes I think are valueable related to JEST

• Debugging LWC Tests in VS Code
• Lightning Web Components - Testing
• Jest Unit Testing with LWC
• Nested Component Unit Testing Lightning Web Components (LWC)

---

• Lightning Web Components Library

  Publicly maintained list of LWC comps, with a prettier view than this readme! (Lucas Valhos, @lucasvalhos)

• Lightning Web Components Performance Best Practices

---

Want to learn On Platform LWC?

• LWC Trailhead Trail
• Component Documentation
• Developer Documentation
• Play by Play Video: Understanding Lightning Web Components for Salesforce Developers
• Play by Play Video: Understanding Lightning Web Components for Non-Salesforce Developers
• Intro into LWCs (James Hou, @tsalb)
• Lightning Web Components Developer Workshop

---

New to Javascript?

• You Don't Know JS
• Scrimba ES6 Course by Dylan Israel

---

Need help setting up VS Code for Salesforce Development?

• Official Salesforce Extension Documentation (Note the JDK alternatives)

---

OSS LWC

Community Repos

• LWC SOQL Builder

---

Creative Commons Legal Code

CC0 1.0 Universal