Component Story Format (CSF)

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

Storybook’s Component Story Format (CSF) is the recommended way to write stories since Storybook 5.2.

In CSF, stories and component metadata are defined as ES Modules. Every component story file consists of a required default export and one or more named exports.

WebComponents.dev supports Storybook 6.0 improvements.

Stories

Stories are named exports returning a function.

export const BasicButton = () => story;

The rendering of story depends on his type.

See our Open-Source universal-story-renderer for more details.

String

export const BasicButton = () => '<button>Basic</button>';

Element

var element = document.createElement('button');
element.appendChild(document.createTextNode('Click Me!'));
export const BasicButton = () => element;

lit-html

import { html } from 'lit-html';
import './my-button.js';

const name = 'World';
export const BasicButton = () => html`<button>Hello ${name}</button>`;

uhtml

import { html } from 'uhtml';
import './my-button.js';

const name = 'World';
export const BasicButton = () => html`<button>Hello ${name}</button>`;

lighterhtml

import { html } from 'lighterhtml';
import './my-button.js';

const name = 'World';
export const BasicButton = () => html`<button>Hello ${name}</button>`;

Omi (JSX)

/** @jsx h */
import './index.js';
import { h } from 'omi';

export const story1 = () => <my-counter></my-counter>;

Stencil (JSX)

/* @jsx h */
import { h } from '@stencil/core';
import './my-counter.tsx';

export const story1 = () => <my-counter></my-counter>;

Parameters

Supported parameters are:

parameters: {
  backgrounds: {
    default: "light" | "dark",
  },
  layout: "centered" | "padded" | "fullscreen",
}

You can default the parameters of all stories in export default

export default {
  parameters: {
    backgrounds: {
      default: 'dark',
    },
    layout: 'centered',
  },
};

Or setup for a specific story

export const BasicButton = () => html`<button>Hello ${name}</button>`;
BasicButton.parameters = {
    backgrounds: {
      default: "dark",
    },
    layout: "centered",
  }
};

Args

Args allows stories to receive dynamic data as input arguments.

const Template = (args) => <Button {...args} />;

export const Text = Template.bind({});
Text.args = { label: 'hello', background: '#ff0' };

export const Emoji = Template.bind({});
Emoji.args = { ...Text.args, label: '😀 😎 👍 💯' };

For more details see Introducing Storybook Args.

References

Quick example

index.stories.js

import './index.ts';
import { html } from 'lit-html';

export default {
  parameters: {
    backgrounds: {
      default: 'dark',
    },
    layout: 'centered',
  },
};

export const story1 = () => html` <name-tag>John Foo</name-tag> `;
export const story2 = () => html` <name-tag>John Bar</name-tag> `;
story2.parameters = { backgrounds: { default: 'light' } };

CSS: Cascading Style Sheets

Introduction