How to customize the viewport in the Storybook

This blog talks about customizing the storybook viewports and making testing UI elements easier.

While creating UI elements on the storybook we might have to test UI elements according to the breakpoints we have defined in our project. This blog post provides a guide on how to add customized viewports in Storybook.

By default, Storybook uses a minimal set of viewports to get us started. But we are not restricted to these. The addon offers a more granular list of devices. We can also define our viewports customized to breakpoints in the project.

I have created a storybook for my React + TS + MUI project. There are default viewports in this storybook now.

I need to have a variety of devices listed to properly test my components. Let’s delve into the use of addons to establish different viewports, which can be accomplished by modifying preview.js.

Let’s import INITIAL_VIEWPORTS in my preview.js and feed it to viewports in the parameters.

//.storybook/preview.js

import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';



export const parameters = {
  viewport: {
    viewports: INITIAL_VIEWPORTS,
  },
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}

We can see more devices now. Very helpful to test UI on the spot.

Let’s define custom viewports now.

Let’s define the viewports to match the breakpoints that have been defined in the project.

   xs: 350,
        sm: 600,
        md: 900,
        lg: 1200,
        xl: 1536,

//  breakpoints from my project

Let’s define the below array in my preview.js. And add that to the viewports in the parameters.

const customViewports = {
  xs: {
    name: 'XS',
    styles: {
      width: '350px',
      height: '963px',
    },
  },
  sm: {
    name: 'SM',
    styles: {
      width: '600px',
      height: '801px',
    },
  },
  md: {
    name: 'MD',
    styles: {
      width: '900px',
      height: '801px',
    },
  },
  lg: {
    name: 'LG',
    styles: {
      width: '1200px',
      height: '801px',
    },
  },
  xl: {
    name: 'XL',
    styles: {
      width: '1536px',
      height: '801px',
    },
  },
};

This is how my preview.js looks.

const customViewports = {
  xs: {
    name: 'XS',
    styles: {
      width: '350px',
      height: '963px',
    },
  },
  sm: {
    name: 'SM',
    styles: {
      width: '600px',
      height: '801px',
    },
  },
  md: {
    name: 'MD',
    styles: {
      width: '900px',
      height: '801px',
    },
  },
  lg: {
    name: 'LG',
    styles: {
      width: '1200px',
      height: '801px',
    },
  },
  xl: {
    name: 'XL',
    styles: {
      width: '1536px',
      height: '801px',
    },
  },
};

export const parameters = {
  viewport: {
    viewports: customViewports,
  },
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}

You can see your custom sizes in the storybook.

If you want both INITIAL_VIEWPORTS and customViewports in your storybook, simply do this.

     viewports: {
        ...MINIMAL_VIEWPORTS,
        ...customViewports,
      },

And that sums it up. You can find the link to the repository here. Comment below if it helped you!!