Lightning Web Components Recipes Open Source

A collection of easy-to-digest code examples for Lightning Web Components Open Source. Each recipe demonstrates how to code a specific task in 30 lines of code or less. A View Source link takes you right to the code in GitHub. From Hello World to data access and third-party libraries, there is a recipe for that!

Recipes Live Version

Check out https://lwc-recipes-oss.herokuapp.com live on Heroku. Or on https://recipes.lwc.dev.

Deploy to Heroku

If you want to deploy LWC Recipes Open Source to Heroku - there's a button for that.

Local Development

Clone the lwc-recipes-oss repository:

git clone https://github.com/trailheadapps/lwc-recipes-oss
cd lwc-recipes-oss

Install the project dependencies using yarn (or npm, if you prefer that alternatively)

yarn install

Start the app in watch mode.

yarn watch

Enjoy the app!

Modifications for Edge browser users

The Edge browser currently doesn't support native shadow DOM. If you want to use this application you have to manually add the synthetic shadow DOM to your clone. Add to the first line of the index.js this code:

import '@lwc/synthetic-shadow';

Code Tours