# storybook-addon-web-components-knobs > Storybook knobs for web-components based on custom-elements.json Latest version **0.3.20** (published 2020-10-28) · MIT license · 0 weekly downloads ## Install ```sh npm install storybook-addon-web-components-knobs pnpm add storybook-addon-web-components-knobs yarn add storybook-addon-web-components-knobs bun add storybook-addon-web-components-knobs ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned. ## Facts | | | |---|---| | Version | 0.3.20 | | Published | 2020-10-28 | | First published | 2019-12-10 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 1 | | Unpacked size | 20.6 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 2399 | | Author | open-wc | | Maintainers | d4kmor, modern-web | | Keywords | storybook, demo, demo-states, testing | ## Links - npm: https://www.npmjs.com/package/storybook-addon-web-components-knobs - Repository: https://github.com/open-wc/open-wc - Homepage: https://github.com/open-wc/open-wc/tree/master/packages/storybook-addon-web-components-knobs - Issues: https://github.com/open-wc/open-wc/issues - npm.io page: https://npm.io/package/storybook-addon-web-components-knobs ## Dependencies (1) - [@open-wc/testing-helpers](https://npm.io/package/@open-wc/testing-helpers.md) ^1.8.12 ## Alternatives - [duck](https://npm.io/package/duck.md) — 4.2M weekly downloads - [ava](https://npm.io/package/ava.md) — 560.2K weekly downloads - [storybook-addon-module-mock](https://npm.io/package/storybook-addon-module-mock.md) — 71.7K weekly downloads - [vest](https://npm.io/package/vest.md) — 50.1K weekly downloads - [@ethereum-waffle/mock-contract](https://npm.io/package/@ethereum-waffle/mock-contract.md) — 40.0K weekly downloads ## Recent versions - 0.3.20 (latest) — 2020-10-28 - 0.3.19 — 2020-10-28 - 0.3.18 — 2020-10-02 - 0.3.17 — 2020-08-19 - 0.3.16 — 2020-08-16 - 0.3.15 — 2020-08-14 - 0.3.14 — 2020-08-05 - 0.3.13 — 2020-08-04 - 0.3.12 — 2020-07-08 - 0.3.11 — 2020-06-15 - 0.3.10 — 2020-05-01 - 0.3.9 — 2020-04-26 - 0.3.8 — 2020-04-26 - 0.3.7 — 2020-04-20 - 0.3.6 — 2020-04-12 - … 15 more at https://npm.io/package/storybook-addon-web-components-knobs/versions ## README # storybook-addon-web-components-knobs > Part of [Open Web Components](https://github.com/open-wc/open-wc/): guides, tools and libraries for modern web development and web components [![CircleCI](https://circleci.com/gh/open-wc/open-wc.svg?style=shield)](https://circleci.com/gh/open-wc/open-wc) [![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=M2UrSFVRang2OWNuZXlWSlhVc3FUVlJtTDkxMnp6eGFDb2pNakl4bGxnbz0tLUE5RjhCU0NUT1ZWa0NuQ3MySFFWWnc9PQ==--86f7fac07cdbd01dd2b26ae84dc6c8ca49e45b50)](https://www.browserstack.com/automate/public-build/M2UrSFVRang2OWNuZXlWSlhVc3FUVlJtTDkxMnp6eGFDb2pNakl4bGxnbz0tLUE5RjhCU0NUT1ZWa0NuQ3MySFFWWnc9PQ==--86f7fac07cdbd01dd2b26ae84dc6c8ca49e45b50) [![Renovate enabled](https://img.shields.io/badge/renovate-enabled-brightgreen.svg)](https://renovatebot.com/) # Features - Create API documentation/playground ## Setup ```bash npm i storybook-addon-web-components-knobs @storybook/addon-docs ``` ### Create API playground ::: tip You can find a more interactive version of this in the [withWebComponentsKnobs docs](https://open-wc.org/demoing-storybook/?path=/docs/decorators-withwebcomponentknobs--example-output). ::: Base on the data in [custom-elements.json](./#custom-elementsjson) we can automatically generate knobs for your stories. To enable this feature you will need to add an additional decorator. **MDX** ```md import { withKnobs, withWebComponentsKnobs } from '@open-wc/demoing-storybook'; {html` A character that is part of a book series... `} ``` **CSF** ```js import { html } from 'lit-html'; import { withKnobs, withWebComponentsKnobs } from '@open-wc/demoing-storybook'; import '../demo-wc-card.js'; export default { title: 'Card|Playground', component: 'demo-wc-card', decorators: [withKnobs, withWebComponentsKnobs], parameters: { options: { selectedPanel: 'storybookjs/knobs/panel' } }, }; export const singleComponent = () => html` `; ``` For additional features like - define which components to show knobs for - showing knobs for multiple different components - syncing components states to knobs - Filtering properties and debugging states please see the official [documentation of the knobs for web components decorator](/demoing-storybook/?path=/docs/decorators-withwebcomponentknobs--example-output). ### custom-elements.json In order to get documentation for web-components you will need to have a [custom-elements.json](https://github.com/webcomponents/custom-elements-json) file. You can hand write it or better generate it. Depending on the web components sugar you are choosing your mileage may vary. Please not that the details of the file are still being discussed so we may adopt to changes in `custom-elements.json` without a breaking release. Known analyzers that output `custom-elements.json`: - [web-component-analyzer](https://github.com/runem/web-component-analyzer) - Supports LitElement, Polymer, Vanilla, (Stencil) - [stenciljs](https://stenciljs.com/) - Supports Stencil (but does not have all metadata) It basically looks like this: ```json { "version": 2, "tags": [ { "name": "demo-wc-card", "properties": [ { "name": "header", "type": "String", "description": "Shown at the top of the card" } ], "events": [], "slots": [], "cssProperties": [] } ] } ``` For a full example see the [./demo/custom-elements.json](./demo/custom-elements.json). --- _Source: https://npm.io/package/storybook-addon-web-components-knobs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._