Viewports and modes

Test responsive layouts and themed variants of the same story.

Set a viewport directly#

// .storybook/preview.ts
export default {
  parameters: {
    framecheck: { viewport: { width: 1280, height: 800 } },
  },
};

A story-level value overrides the inherited default. A fixed viewport is often the simplest way to begin responsive coverage.

Capture named modes#

export const Default = {
  parameters: {
    framecheck: {
      modes: {
        desktop: { viewport: { width: 1280, height: 800 } },
        mobile: { viewport: { width: 390, height: 844 } },
        dark: {
          viewport: { width: 1280, height: 800 },
          globals: { theme: 'dark' },
        },
      },
    },
  },
};

The theme global must be implemented by your Storybook theme decorator. Naming a mode dark does not change the component by itself. Each mode and browser adds a variant to inspect and maintain.

Disable a mode inherited from a parent with a mode of the same name containing disable: true.

Storybook viewport configuration#

Framecheck also resolves Storybook viewport settings. For named devices, include their definitions in parameters.viewport.options (or the older viewports form). Storybook 9 and newer use a viewport global such as:

export const Mobile = {
  globals: { viewport: { value: 'mobile1' } },
};

If you use extended device names, import and register Storybook's device viewport definitions for your Storybook version. An unknown name cannot be assumed to mean a specific screen size.

Viewport not applied#

Read the warning and define the missing viewport or replace it with an explicit Framecheck { width, height }. A capture not made as requested can block review even if the visible image appears acceptable. Fix the configuration and run again.

Estimate coverage#

For 100 stories with two modes and three browsers, expect up to 600 visual snapshots. Skips and story-specific variants change the actual count. Accessibility adds checks in Chromium. See usage.