Skip to content
Vizzly Docs

Static Site Examples

Capture only part of the site

export default {
  staticSite: {
    include: 'blog/**',
    exclude: '**/404.html',
  },
};

Multiple viewports

export default {
  staticSite: {
    viewports: [
      { name: 'mobile', width: 375, height: 667 },
      { name: 'tablet', width: 768, height: 1024 },
      { name: 'desktop', width: 1920, height: 1080 },
    ],
  },
};

CI-friendly browser args

browser.args are extra launch args appended to Vizzly’s Chromium defaults.

export default {
  staticSite: {
    browser: {
      type: 'chromium',
      headless: true,
      args: ['--no-sandbox', '--disable-dev-shm-usage'],
    },
  },
};

Page-level overrides

Put executable interactions and page overrides in vizzly.static-site.js. Keeping functions in this separate file avoids sending them through the main config schema.

vizzly.static-site.js
export default {
  interactions: {
    'choose-annual': async page => {
      await page.click('[data-test-billing-cycle="annual"]');
    },
  },
  pages: {
    '/pricing': {
      interaction: 'choose-annual',
      viewports: [
        { name: 'desktop', width: 1440, height: 900 },
      ],
      screenshot: {
        properties: { plan: 'annual' },
        fullPage: true,
        requestTimeout: 60000,
      },
    },
  },
};

Keep shared comparison sensitivity in the top-level comparison section of vizzly.config.js; page screenshot overrides are for capture behavior and metadata.

Dry run discovery

Terminal window
vizzly static-site ./dist --dry-run

Use this first when you are unsure which pages will be captured.

Tune concurrency when needed

Terminal window
vizzly static-site ./dist --concurrency 1

The plugin already chooses a dynamic default based on CPU count. Override it only when you need to reduce memory pressure or push harder in CI.

If pages are missing

  • verify sitemap.xml
  • verify built .html files exist
  • tighten or remove include and exclude filters

Next steps