Welcome to Lightning Web Components Recipes
Lightning Web Components Recipes is a collection of 123+ easy-to-digest code examples that demonstrate how to build Lightning Web Components on Salesforce Platform. Each recipe shows you how to code a specific task in the fewest lines of code possible while following best practices.This sample application is designed to run on Salesforce Platform. If you want to experience Lightning Web Components on any platform, visit lwc.dev and try out LWC Recipes OSS.
What You’ll Learn
This repository provides practical examples across all key Lightning Web Components concepts:Hello World Basics
Start with simple property binding and basic component structure
Data Access
Learn to work with Salesforce data using wire adapters and imperative methods
Component Communication
Master events, properties, and the pubsub pattern for component interaction
Third-Party Libraries
Integrate external JavaScript libraries like Chart.js into your components
Component Categories
The recipes are organized into practical categories:Data Binding & Rendering
- hello - Simple property binding
- clock - Displaying dynamic time values
- compositionIteration - Rendering lists with
template for:each
Apex Integration
- apexImperativeMethod - Calling Apex methods imperatively
- apexWireMethodToProperty - Wire Apex methods to properties
- apexWireMethodToFunction - Wire Apex methods to functions
- apexWireMethodWithComplexParams - Pass complex parameters to Apex
Lightning Data Service
- wireGetRecord - Fetch record data with the UI API
- ldsCreateRecord - Create records using
createRecord - ldsDeleteRecord - Delete records with Lightning Data Service
- wireGetPicklistValues - Retrieve picklist field values
GraphQL API
- graphqlContacts - Query Salesforce data with GraphQL
- graphqlPagination - Implement pagination with GraphQL
- graphqlMultipleObjects - Query multiple object types
Navigation
- navToRecord - Navigate to record pages
- navToRelatedList - Navigate to related lists
- navToNewRecord - Navigate to create new records
Component Events
- eventSimple - Handle simple button click events
- eventWithData - Pass data with custom events
- eventBubbling - Understand event bubbling and propagation
Third-Party Libraries
- libsChartjs - Integrate Chart.js for data visualization
- libsD3 - Use D3.js for advanced visualizations
Workspace API
- workspaceAPIOpenTab - Open workspace tabs programmatically
- workspaceAPICloseTab - Close workspace tabs
- workspaceAPISetTabLabel - Update tab labels dynamically
Key Features
Real Working Code
Every example is fully functional code extracted from the actual LWC Recipes app running on Salesforce Platform.
View Source Links
Each recipe includes a direct link to the source code on GitHub for easy reference.
Best Practices
All recipes follow Salesforce Lightning Web Components best practices and conventions.
Learning Resources
Trailhead Project
Complete the Quick Start: Explore the LWC Recipes Sample App guided project
Video Tutorial
Watch the presentation video for a walkthrough of the app
GitHub Repository
Explore the complete source code and contribute to the project
Code Tours
Install the CodeTour VSCode extension for guided walkthroughs through the code
What’s Next?
Install the App
Get LWC Recipes running in your Salesforce org
Quick Start Guide
Start exploring components and building your first LWC