Demoing via storybook

For demoing and showcasing different states of your Web Component, we recommend using storybook.


This is part of the default open-wc recommendation


npm i -g yo
npm i -g generator-open-wc

yo open-wc:demoing


  • yarn add @open-wc/storybook --dev
  • Copy at minimum the .storybook folder to .storybook
  • If you want to bring along the examples, you may also copy the stories folder.
  • Add the following scripts to your package.json
"scripts": {
  "site:build": "npm run storybook:build",
  "storybook:build": "build-storybook -o _site",
  "storybook:start": "start-storybook -p 9001"


Create stories within the stories folder.

npm run storybook:start


The Set-Game Example has the default publishing via storybook on netlify. You can see the finished page at:

Last Updated: 1/19/2019, 12:51:15 PM