open-wc/packages/storybook/README.md

Demoing via storybook

Part of Open Web Component Recommendation open-wc

Open Web Components provides a set of defaults, recommendations and tools to help facilitate your Web Component. Our recommendations include: developing, linting, testing, tooling, demoing, publishing and automating.

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

::: tip Info This is part of the default open-wc recommendation :::

Setup

npx -p yo -p generator-open-wc -c 'yo open-wc:publish-storybook'

Manual

• 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"
},

Usage

Create stories within the stories folder.

npm run storybook:start

Example

The Set-Game Example has the default publishing via storybook on netlify. You can see the finished page at: https://example-set-game-open-wc.netlify.com/.