@storybook/html

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.

README

Storybook HTML Renderer