Need help with lrnwebcomponents?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

186 Stars 66 Forks Apache License 2.0 5.3K Commits 1 Opened issues


@lrnwebcomponents Monorepo for NPM based element definitions

Services available


Need anything else?

Contributors list


License: Apache 2.0 lerna Lit #HAXTheWeb code style: prettier

Published on npm build Dependency Status Published on Slack Twitter

Welcome to the lrnwebcomponents project!

ELMS:LN produced web components for any project



Notice: You will need to use Node version 6.0 or higher. Verify that you have yarn enabled — if not install yarn globally. These web components are written in ES6 and build routines compile to es5 to encompass legacy browsers.

Quick Install

$ curl -fsSL -o && sh

Manual Install

$ git clone
$ cd lrnwebcomponents
$ yarn global add @wcfactory/cli
$ yarn global add polymer-cli
$ yarn global add lerna
$ yarn global add web-component-analyzer
$ yarn install

Syncing Your Fork

$ git remote add upstream
$ git fetch upstream
$ git pull


Git bash should already be installed on your Windows machine and can be found by searching through your computer's applications or by right-clicking anywhere inside of the File Explorer. Cygwin command line is lightly tested, but slower than a true Bash environment.

Windows Install

To properly configure git endlines for Windows, run this configuration

$ git config --global core.autocrlf true
$ git clone
$ cd lrnwebcomponents
$ yarn global add symlink-dir
$ yarn global add @wcfactory/cli
$ yarn global add polymer-cli
$ yarn global add lerna
$ yarn global add web-component-analyzer
$ yarn install

To work on any element in our repo

$ cd elements/ELEMENTNAME
$ yarn start

Edit files in

in order to modify the element to contribute back to us via PR.


  • $ wcf element
    • Create a new component.
    • Needs to be within the WCFactory ( to use.
  • $ yarn run rebuild-wcfcache
    • Rebuild caches as to what web component libraries can be used
  • $ yarn test
    • Run tests on ALL lrnwebcomponents.
  • $ yarn run build
    • Run build on ALL lrnwebcomponents.
  • $ yarn run storybook
    • Run storybook
  • $ yarn run build-storybook
    • Build storybook for deployment
  • $ lerna publish
    • Publish ALL lrnwebcomponents' elements to
  • $ lerna run build --no-bail
    • Run
      command in all projects in the repo, don't bail if there's an issue

Web Component development

Because this is a monorepo, each web component will need to be independently built in order to actively work on and preview the changes. Every web component has its own Gulp file and Yarn/NPM script.

While still running

yarn start
in one terminal window (which runs the local server), you will need to open another terminal window, drill into the directory of the web component you'd like to work on, and execute the
yarn run dev
command. This command will use gulp tasks to watch the files within that web component directory and will automatically re-run the build command and refresh the browser when you make changes to the web component.

Working on elements (new-element)


wcf element
to make a new element. Go to the new element following the directions generated at the end of the element's creation. To work on the new-element run
yarn start
from it's directory. If you are pulling in another element to use, run
yarn add projectname --save

Example development on a web component

$ cd /Sites/lrnwebcomponents
$ yarn start

SHIFT + CTRL + T to open a new tab in Terminal

$ cd elements your-card # or any other web component $ yarn run dev

Make a change to the web component and save. The gulpfile will handle transpiling the element down to ES5 and will bring in the HTML and Sass into the template in the web component.


To test all lrnwebcomponents, run

yarn test
from the root of the repo. If you only want to test the web component you're working on:
$ cd elements/your-card
$ yarn test

Also, if your tests are failing and you want access to a live browser to investigate why, the following flag will keep the browser open.

$ yarn test -- -p

Then open the URL that will be printed in the terminal. It looks something like this:



We've added Storybook to lrnwebcomponents as a way to preview our web components as they are being developed. We'll also use Storybook to export a static site that will be the demo site for lrnwebcomponents.

To run storybook

$ yarn run storybook

This will start a web server on port 9001. Navigate in your browser to

to see Storybook in action. Storybook will watch for file changes and reload the browser automatically for you. This is a little slow at the moment, but we'll look into speeding this up.

To export the storybook static site

$ yarn run build-storybook

This places a build of the storybook site in the .storybook_out directory.

Known Issues with Storybook

For any web component that has a third-party dependency you will need to update the

file. You will need to create an alias for your depedency.

For example:

"../../whatwg-fetch/fetch.js": path.join( // this is the third-party dependency in the lrnwebcomponents
  "../node_modules/whatwg-fetch/fetch.js" // this is where it lives in node_modules

Tech Stack

Client: JavaScript, LitElement, Lit(

Server: Node.js


Contributions are always welcome!


We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.