How to Screenshot a Strapi-Powered Site in TypeScript

Strapi is a self-hosted headless CMS, which means the team running it usually also owns the frontend consuming its API — a natural fit for triggering screenshots from the same TypeScript codebase that already handles the rest of the stack.

Why Strapi-Powered Sites Have Their Own Quirks

• Draft and publish workflows mean a content editor's changes may not be visible on the live site until explicitly published — capturing the wrong environment gives a misleading result.
• Component-based content models in Strapi can produce widely different page layouts depending on which components an editor assembled, so a "typical" page isn't necessarily representative.
• Media library assets served from Strapi's own media handling can load slightly after the page shell if not optimized.

TypeScript Example

const response = await fetch("https://api.prod.ss.snapshot-site.com/api/v1/screenshot", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "x-snapshotsiteapi-key": "YOUR_API_KEY",
  },
  body: JSON.stringify({
    url: "https://example.com/articles/latest-post",
    format: "png",
    width: 1440,
    height: 900,
    fullSize: true,
    hideCookie: true,
    delay: 2,
  }),
});

const data = await response.json();
console.log(data);

Practical Recommendations

• Capture the exact environment you mean to check. A staging deployment reflecting a draft entry and the production site reflecting the published version are genuinely different pages, even at the same-looking URL pattern.
• Use delay for pages with several media-heavy components. Two to three seconds is usually enough for a component-assembled page to fully settle.
• Default to fullSize: true. Strapi-driven pages built from stacked components are typically longer than a single screen.
• Batch by content type using Strapi's own API to get a URL list, then feed it into the screenshot calls above for a full content audit.

Common Use Cases

• Editorial review of a draft page before publishing
• Visual QA after a content model or component change
• Archiving published articles at their point-in-time state
• Feeding a scheduled visual monitor, as described in Visual Uptime Monitoring

For teams running Strapi and a TypeScript frontend, Snapshot Site fits into the existing stack as one more API call, with no separate rendering service to run.