Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/Confirm4Crit/awesome-lwc

A list of interesting on platform Lightning Web Components resources and code examples
https://github.com/Confirm4Crit/awesome-lwc
List: awesome-lwc
lightning-web-components lwc lwc-oss lwcoss salesforce salesforce-developers
Last synced: about 2 months ago
JSON representation
A list of interesting on platform Lightning Web Components resources and code examples
Host: GitHub
URL: https://github.com/Confirm4Crit/awesome-lwc
Owner: Confirm4Crit
Created: 2020-01-18T20:54:44.000Z (over 4 years ago)
Default Branch: main
Last Pushed: 2023-03-06T15:37:58.000Z (over 1 year ago)
Last Synced: 2024-05-21T18:04:39.609Z (4 months ago)
Topics: lightning-web-components, lwc, lwc-oss, lwcoss, salesforce, salesforce-developers
Language: CSS
Homepage: https://www.awesomelwc.com/
Size: 3.74 MB
Stars: 177
Watchers: 12
Forks: 47
Open Issues: 19
Metadata Files:
- Readme: README.md
Awesome Lists containing this project

ultimate-awesome - awesome-lwc - A list of interesting on platform Lightning Web Components resources and code examples. (Programming Language Lists / JavaScript Lists)
README

        # Awesome LWC

### UPDATE!!!

---

I just made this to a LWC OSS site [here](https://www.awesomelwc.com/)!

I plan on making a style/contribution guide to the site ASAP. Site is fairly basic right now, some elbow grease and SLDS based on the OSS Trailhead.

All this is community driven and isn't directly associated to Salesforce or related organizations.

---

A list AND SITE of interesting Lightning Web Components resources and code examples

Most of this repo is for "On platform" means resources specific to the SFDC platform, but [LWC Open Source](https://lwc.dev/) 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](https://discordapp.com/invite/JG4Bc4q)!

---

## On Platform Community Repos

-   [LWCC](https://github.com/SalesforceLabs/LightningWebChartJS)

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

-   [Timeline](https://github.com/deejay-hub/timeline-lwc) (Dave Norris, [@deejay-hub](https://github.com/deejay-hub))

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

-   [LWC Utils and Design Patterns](https://github.com/tsalb/lwc-utils) (James Hou, [@tsalb](https://github.com/tsalb))

    Reusable LWCs to 10x your solution building speed. Design interactive, data-dense UIs with LWC + Screen Flows.

-   [Lightning Chatter Messenger](https://github.com/shunkosa/lightning-chatter-messenger) (Shun Kosaka, [@shunkosa](https://github.com/shunkosa))

    A utility item to support real time private chatter conversations.

-   [Salesforce-Custom-Path-Assistant-LWC](https://github.com/maaaaarco/Salesforce-Custom-Path-Assistant-LWC) (Marco Zeuli, [@maaaaarco](https://github.com/maaaaarco))

    A custom path assistant built using only Lightning Web Components.

-   [User Interactions with Platform Events and LWC](https://github.com/lucianostraga/userInteractions-platformEvents-lwc) (Luciano Straga, [@lucianostraga](https://github.com/lucianostraga))

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

-   [LWC Listview](https://github.com/shliachtx/lwc-listview) (Menachem Lazaroff, [@shliachtx](https://github.com/shliachtx))

    A dynamic datatable for use in flexipages or standalone.

-   [Salesforce Lookup Component (Lightning Web Component version)](https://github.com/pozil/sfdc-ui-lookup-lwc) (Philippe Ozil, [@pozil](https://github.com/pozil/))

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

-   [LWC-Lookup-Datatable](https://github.com/SFXD/LWC-Lookup-Datatable) (Salesforce Discord Exchange

    , [@SFDX](https://github.com/SFXD), Atlas Can [@AtlasCan](https://github.com/AtlasCan))

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

-   [lwc-lookup](https://github.com/justin-lyon/lwc-lookup) (Justin Lyon, [@justin-lyon](https://github.com/justin-lyon))

    An SObject Generic Lookup field with LWC.

-   [lwc-metadata-picker](https://github.com/justin-lyon/lwc-metadata-picker) (Justin Lyon, [@justin-lyon](https://github.com/justin-lyon))

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

-   [Dynamic Multi Row Editable Tables using LWC](https://github.com/seanpat09/dynamicFieldsLWC) (Sean Cuveo, [@seanpat09](https://github.com/seanpat09))

    A dynamic multi-line input table using LWC.

-   [One PubSub](https://github.com/TheVishnuKumar/one-pub-sub-lwc) (Vishnu Kumar, [@TheVishnuKumar](https://github.com/TheVishnuKumar))

    A Declarative PubSub Library for Lightning Web Component and Aura Component.

-   [LWC Signature Pad](https://github.com/samkhan27/lwc-signature-pad) ([@samkhan27](https://www.github.com/samkhan27))

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

-   [Polyglot](https://github.com/ruslan-kurchenko/lwc-polyglot) (Ruslan Kurchenko, [@ruslan-kurchenko](https://github.com/ruslan-kurchenko))

    Salesforce Lightning Web Component to facilitate multilingual applications development.

-   [LWC Files Related List](https://github.com/surajp/lwc-files-list) (Suraj Pillai, [@surajp](https://github.com/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](https://github.com/gavignon/lwc-stencil) ([@gavignon](https://github.com/gavignon0))

    Lightning Web Component used for Skeleton Loading [LDS Ref.](https://www.lightningdesignsystem.com/guidelines/loading)

-   [SLDS Illustration Cmp](https://github.com/kacrouse/lwc-illustration) ([@kacrouse](https://github.com/kacrouse))

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

-   [LWC Confirmation Dialog](https://github.com/marcoalmodova/confirm-dialog) ([@marcoalmodova](https://github.com/marcoalmodova))

-   [LWC Component COVID19 ](https://github.com/arufian/LWC-Component-COVID19) (Alfian Busyro, [@arufian](https://github.com/arufian))

    A 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](https://github.com/surajp/lightning-js-button) ([@surajp](https://github.com/surajp))

    JavaScript buttons that work in Lightning!

-   [Payment Form](https://github.com/rapsacnz/PaymentForm) ([@rapsacnz](https://github.com/rapsacnz))

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

-   [LWC Style Distributor](https://github.com/foxcreation/LWC-Style-Distributor) ([@foxcreation](https://github.com/foxcreation))

    Style Distributor Lightning Web Component for Salesforce.

-   [Apex Continuations (LWC and Aura)](https://github.com/victorgz/sfdc-apex-continuations) ([@victorgz](https://github.com/victorgz))

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

-   [LWC Modal](https://github.com/jamessimone/lwc-modal) ([@jamessimone](https://github.com/jamessimone))

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

-   [LWC Paginator](https://github.com/jamessimone/lwc-paginator) ([@jamessimone](https://github.com/jamessimone))

    Composable pagination LWC.

-   [lightning-wizard](https://github.com/jmpisson/lightning-wizard) ([@jmpisson](https://github.com/jmpisson))

    Wizard component for building flows with LWC.

-   [Indicators](https://github.com/JodieM/Indicators) ([@JodieM](https://github.com/JodieM))

    Indicators for LWC.

-   [Confirmation Dialog](https://github.com/surajp/lwc-confirmation-dialog) ([@surajp](https://github.com/surajp))

    LWC Confirmation Dialog.

-   [Tilewall](https://github.com/Dogeforce/tilewall-lwc) ([@Dogeforce](https://github.com/Dogeforce))

    A component that displays a grid like GitHub's commit history.

-   [LWC-OTP](https://github.com/Dogeforce/lwc-otp) ([@Dogeforce](https://github.com/Dogeforce))

    A component that displays OTP codes for a given secret stored in a record.

-   LWC [Redux](https://github.com/prashantk0001/lwc-redux) and [Router](https://github.com/prashantk0001/lwc-router)

    There's others like this, but I picked this one!

-   LWC [Redux](https://github.com/chandrakiran-dev/lwc-redux)

    Okay this one has a cool doc site :D

-   [LWC Action](https://github.com/andrii-solokh/LWCAction) ([@andrii-solokh](https://github.com/andrii-solokh))

-   [Image Censor Component](https://github.com/arufian/Image-Censor-Lightning-Web-Component) (Alfian Busyro, [@arufian](https://github.com/arufian))

    A photo editor to censor or block sensitive data

---

## 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](https://momentjs.com/)

-   [Chart JS](https://www.chartjs.org/) JS Charting library.

-   [D3](https://d3js.org/), a data visualization library.

    -   [C3](https://c3js.org/), a charting library dependent on D3.

-   [PapaParse](https://github.com/mholt/PapaParse), a CSV parser, handles sloppy input and big files. (Use this).

-   [Leaflet](https://leafletjs.com/) Mobile friendly maps.

-   [Chroma.js](https://github.com/gka/chroma.js/) Color manipulation library, useful with D3/Chart JS.

-   [Signature Pad](https://github.com/szimek/signature_pad) HTML5 Canvas for accepting signatures.

---

## Official Examples

-   [Salesforce Sample Gallery](https://trailhead.salesforce.com/sample-gallery)

-   [LWC Recipes](https://github.com/trailheadapps/lwc-recipes)

-   [On Platform Base Components](https://github.com/salesforce/base-components-recipes)

---

## Interesting Posts, Blogs, and Sites

### JEST related posts

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

-   [Debugging LWC Tests in VS Code](https://www.mattgoldspink.co.uk/debugging-lwc-tests-vs-code/)

-   [Lightning Web Components - Testing](https://socalledprogrammer.com/2019/01/02/lightning-web-components-testing.html)

-   [Jest Unit Testing with LWC](https://www.foglightsolutions.com/blog/lwc_jest_unit_testing/)

-   [Nested Component Unit Testing Lightning Web Components (LWC)](https://tigerfacesystems.com/blog/lwc-nested-component-testing)

---

-   [Lightning Web Components Library](https://salesforce-lightning-web-components-lwc-library.valhos.com/)

    Publicly maintained list of LWC comps, with a prettier view than this readme! (Lucas Valhos, [@lucasvalhos](https://github.com/lucasvalhos))

-   [Lightning Web Components Performance Best Practices](https://developer.salesforce.com/blogs/2020/06/caching-in-the-salesforce-platform.html)

---

## Want to learn On Platform LWC?

-   [LWC Trailhead Trail](https://trailhead.salesforce.com/en/content/learn/trails/build-lightning-web-components)

-   [Component Documentation](https://developer.salesforce.com/docs/component-library/overview/components)

-   [Developer Documentation](https://developer.salesforce.com/docs/component-library/documentation/lwc)

-   [Play by Play Video: Understanding Lightning Web Components for Salesforce Developers](https://www.pluralsight.com/courses/play-by-play-understanding-lightning-web-components-salesforce-developers)

-   [Play by Play Video: Understanding Lightning Web Components for Non-Salesforce Developers](https://www.pluralsight.com/courses/play-by-play-understanding-lightning-web-components-non-salesforce-developers)

-   [Intro into LWCs](https://github.com/tsalb/intro-to-lwcs) (James Hou, [@tsalb](https://github.com/tsalb))

-   [Lightning Web Components Developer Workshop](https://developerforce.github.io/LWC-Developer-Workshop-2019/index.html)

-   [Lightning Web Components Posts on WIPDeveloper.com](https://wipdeveloper.com/tags/lwc/) (Brett Nelson, [@brettmn](https://github.com/brettmn))

---

## New to Javascript?

-   [You Don't Know JS](https://github.com/getify/You-Dont-Know-JS)

-   [Scrimba ES6 Course by Dylan Israel](https://scrimba.com/g/gintrotoes6)

---

## Need help setting up VS Code for Salesforce Development?

-   [Official Salesforce Extension Documentation](https://developer.salesforce.com/tools/vscode/) (Note the JDK alternatives)

---

# OSS LWC

I am individually not focusing too hard on LWC OSS right now, but I don't want to _ignore it_ either.

## Community Repos

-   [LWC SOQL Builder](https://github.com/lwc-soql-builder/lwc-soql-builder)

-   [LWC OSS Storybook](https://github.com/reiniergs/lwc-storybooks-poc)

---

Creative Commons Legal Code

CC0 1.0 Universal