Stories #

Source file extensions: .stories.(js|jsx|ts|tsx)

Stories are isolated instances of a component and they could have different variants.

Adding a story is easy and will be picked up automatically by WebComponents.dev. Adding a very simple index.stories.js file containing just

export const story1 = () => "<button>Hello</button>";

Will automatically result in that story being rendered in the preview tab:

Of course, how you write this story will depend on your framework and needs. Read on for more information.

Storybook compatible #

WebComponents.dev supports Storybook's CSF stories.