Resizer

The viewport is static and it cuts off overflow. With the Resizer addon you get the power of viewports AND a slider to easily update the container width.

npm install -D storybook-addon-resizer

Usage

[!IMPORTANT] Resizer does not work in centered layouts or docs.

It just works out the box ⚡️

You can set an initial width for all stories:

const preview: Preview = {
  initialGlobals: {
    // ...
    resizer: { width: 200 },
  },
};

All stories for a component:

const meta: Meta<typeof Component> = {
  // ...
  globals: { resizer: { width: 300 } },
};

Or, for a single story:

export const Large: Story = {
  // ...
  globals: { resizer: { width: 400 } },
};

Values are provided in px.