screenshots

screenshots captures still images of a page at one or more viewports, optionally plus specific elements. It's stateless — the page as it loads, no clicks or scripted steps — and each capture is warmed first (scroll the whole document, let fonts load, decode images) so fullPage shots aren't blank or fallback-font further down. Output is png or jpeg.

{
  name: "home-shots",
  url: "https://your-site.com",
  generator: "screenshots",
}

By default it emits a full-page desktop (1440×900) and mobile (390×844) shot. The options add more viewports, crop specific elements at every viewport, switch format/quality, and tune load/settle timing. Site cleanup (hide the cookie banner, block trackers, freeze the clock) lives in settings.capture and applies to every URL capture.

Want to showcase the UI in a state — a menu open, a tab switched, a form filled? screenshots can't click, and it only makes stills. Drive the page with the interaction generator instead (it records an mp4).

Config options

Everything is optional. Reference is the interactive view; TypeScript is the same shape in code, every option at its default.

{
  name: "home-shots",
  url: "https://your-site.com",
  generator: "screenshots",
  options: {
    // --- viewports (each emitted as its own asset) ---
    viewports: [
      {
        name: "desktop",
        width: 1440,
        height: 900,
      },
      {
        name: "mobile",
        width: 390,
        height: 844,
      },
    ],

    // --- what to capture ---
    fullPage: true,
    // elements: [{ selector: "header", name: "nav" }],  // optional; cropped at every viewport

    // --- format & scale ---
    output: {
      format: "png",
      // quality: 80,                // optional; jpeg only, 1–100
      deviceScaleFactor: 2,
      omitBackground: false,         // png only; transparent background
    },

    // --- timing & navigation ---
    page: {
      waitUntil: "networkidle",
      // waitForSelector: "#hero",   // optional; wait for an element first
      settleMs: 0,                   // floored at 600ms by the warm-up pass
    },
  },
}

Every option also has hover docs in pro-visu.config.ts — the authoring types are generated from the validation schema, so the editor always matches what the tool accepts.

Each viewport produces a page shot (unless you scope to elements), and each elements entry produces one capture per viewport, named <asset>-<viewport>-<element>. Viewports render in parallel (cap of 3), each in its own isolated browser context; element shots stay sequential within a viewport, and ids/filenames keep input order. A very large fullPage shot (>16000px on either axis) warns — Chromium caps screenshots near ~32767px, so lower deviceScaleFactor if it clips.

Examples

Full-page desktop capture

fullPage: true shoots the whole scrollable page — far taller than the 900px viewport (scroll the panel):

{name: "home-desktop",generator: "screenshots",options: {  viewports: [    {      name: "desktop",      width: 1440,      height: 900,    },  ],  fullPage: true,},}

Mobile viewport

The same site on a phone with fullPage: false — just the viewport, as a visitor first sees it:

{name: "home-mobile",generator: "screenshots",options: {  viewports: [    {      name: "mobile",      width: 390,      height: 844,    },  ],  fullPage: false,},}

Element crop

elements crops specific components (at every viewport) in addition to the page — here the featured product card, shot on its own as <asset>-desktop-card.png:

{name: "shop-shots",url: "https://your-site.com/shop",generator: "screenshots",options: {  viewports: [    {      name: "desktop",      width: 1440,      height: 900,    },  ],  fullPage: false,  elements: [    {      selector: "#feature-card",      name: "card",    },  ],},}