Skip to content
Vizzly Docs

Storybook Examples

Filter to a subset of stories

export default {
  storybook: {
    include: 'components/**',
    exclude: '**/*.deprecated',
  },
};

Add interaction hooks

export default {
  storybook: {
    interactions: {
      'Button/*': async page => {
        await page.hover('button');
      },
      'Dropdown/*': async page => {
        await page.click('.dropdown-toggle');
      },
    },
  },
};

Cloud comparison settings

Put shared comparison settings at the top level of vizzly.config.js.

export default {
  comparison: {
    threshold: 2,
    minClusterSize: 4,
  },
  storybook: {
    screenshot: {
      timeout: 45000,
      requestTimeout: 60000,
    },
  },
};

timeout is the Playwright screenshot timeout. requestTimeout is the Vizzly transport timeout.

Per-story skip

export let Deprecated = {
  tags: ['vizzly-skip'],
};

parameters.vizzly.skip also works, but the tag is the clearest option in a built Storybook index.

Custom setup for matching stories

vizzly.config.js
export default {
  storybook: {
    interactions: {
      'Tooltip/*': async page => {
        await page.hover('.tooltip-trigger');
      },
    },
  },
};

Use config-level interactions for executable hooks because the command reads a built index.json, which cannot carry JavaScript functions. Serializable parameters.vizzly.screenshot values can still override properties, threshold, minClusterSize, fullPage, omitBackground, timeout, and requestTimeout for one story.

Tip

Keep interaction hooks small and deterministic. If a hook needs a sleep, it usually needs a better readiness signal instead.

Next steps