What is @storybook/html?
@storybook/html is a tool for developing UI components in isolation for HTML-based projects. It allows developers to build, test, and showcase their components in a structured and interactive environment.
What are @storybook/html's main functionalities?
Component Development
This feature allows developers to create and display different states of a component. The code sample demonstrates how to create stories for a Button component with different content.
import { storiesOf } from '@storybook/html';
storiesOf('Button', module)
.add('with text', () => '<button>Hello Button</button>')
.add('with emoji', () => '<button>😀 😎 👍 💯</button>');
Interactive Addons
This feature allows the use of addons to make stories interactive. The code sample shows how to use the Knobs addon to dynamically change the text of a Button component.
import { storiesOf } from '@storybook/html';
import { withKnobs, text } from '@storybook/addon-knobs';
storiesOf('Button', module)
.addDecorator(withKnobs)
.add('with dynamic text', () => {
const label = text('Label', 'Hello Button');
return `<button>${label}</button>`;
});
Documentation
This feature allows developers to add documentation to their stories. The code sample demonstrates how to use the storybook-readme addon to include markdown documentation for a Button component.
import { storiesOf } from '@storybook/html';
import { withDocs } from 'storybook-readme';
import ButtonReadme from './Button.md';
storiesOf('Button', module)
.addDecorator(withDocs(ButtonReadme))
.add('default', () => '<button>Hello Button</button>');
Other packages similar to @storybook/html
@storybook/react
@storybook/react is similar to @storybook/html but is specifically designed for React components. It provides a similar environment for developing, testing, and showcasing React components.
@storybook/vue
@storybook/vue is designed for Vue.js components. It offers the same functionalities as @storybook/html but tailored for the Vue.js framework, allowing developers to work with Vue components in isolation.
@storybook/angular
@storybook/angular is tailored for Angular components. It provides a similar set of features as @storybook/html but is optimized for the Angular framework, enabling developers to build and test Angular components in isolation.
Storybook for HTML
Storybook for HTML is a UI development environment for your plain HTML snippets.
With it, you can visualize different states of your UI components and develop them interactively.
![Storybook Screenshot](https://github.com/storybooks/storybook/blob/master/media/storybook-intro.gif)
Storybook runs outside of your app.
So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
Getting Started
cd my-app
npx -p @storybook/cli sb init -t html
For more information visit: storybook.js.org
Storybook also comes with a lot of addons and a great API to customize as you wish.
You can also build a static version of your storybook and deploy it anywhere you want.