https://github.com/vardumper/storybook-html5
Adds all HTML5 elements to your Storybook
https://github.com/vardumper/storybook-html5
Last synced: 2 months ago
JSON representation
Adds all HTML5 elements to your Storybook
- Host: GitHub
- URL: https://github.com/vardumper/storybook-html5
- Owner: vardumper
- License: mit
- Created: 2024-04-04T09:38:32.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-04T10:26:36.000Z (about 2 years ago)
- Last Synced: 2025-10-23T21:41:13.776Z (8 months ago)
- Language: TypeScript
- Size: 194 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Storybook HTML5 Addon
Adds all HTML5 elements to your Storybook. The category will be named HTML5, and each element is populated with a Default story, an empty SASS stylesheet and uses faker generated content. You can adjust these configs if necessary.
## Installation
First, install the package.
```sh
npm install --save-dev storybook-html5
```
Then, register it as an addon in `.storybook/main.js`.
```js
// .storybook/main.ts
// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/your-framework';
const config: StorybookConfig = {
// ...rest of config
addons: [
'@storybook/addon-essentials'
'storybook-html5', // 👈 register the addon here
],
};
export default config;
```
## Usage
This addons adds a Yarn command to your Storybook project. Executing it will populate all HTML5 stories in your Storybook.
```
yarn storybook-html5
```