New
Storybook for full-stack developersAutomate with Chromatic
Star75,295
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
storybook-addon-web-components-knobs
Storybook knobs for web-components based on custom-elements.json
npm install storybook-addon-web-components-knobs
Last updated about 2 years ago
423
Downloads per week
Readme View on GitHub

storybook-addon-web-components-knobs

Part of Open Web Components: guides, tools and libraries for modern web development and web components

CircleCI BrowserStack Status Renovate enabled

Features

  • Create API documentation/playground

Setup

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. :::

Base on the data in custom-elements.json we can automatically generate knobs for your stories.

To enable this feature you will need to add an additional decorator.

MDX

import { withKnobs, withWebComponentsKnobs } from '@open-wc/demoing-storybook';

<Meta
  title="WithWebComponentsKnobs|Docs"
  decorators={[withKnobs, withWebComponentsKnobs]}
  parameters={{ component: 'demo-wc-card', options: { selectedPanel: 'storybookjs/knobs/panel' } }}
/>

<Story name="Custom Header" height="220px">
  {html`
    <demo-wc-card header="Harry Potter">A character that is part of a book series...</demo-wc-card>
  `}
</Story>

CSF

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` <demo-wc-card></demo-wc-card> `;

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.

custom-elements.json

In order to get documentation for web-components you will need to have a 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:

It basically looks like this:

{
  "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.

Join the community
5,867 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI