How to Capture a SvelteKit App in TypeScript

SvelteKit's appeal is a small runtime and fast client-side navigation, which is great for the app itself but introduces the same timing question every reactive frontend framework does: has the page actually finished rendering by the time a screenshot fires?

Why SvelteKit Apps Need Careful Timing

• Client-side navigation between routes can resolve slightly after the initial shell renders, especially on data-heavy pages using load functions.
• Transitions and animations, a common Svelte feature, are visually incomplete mid-transition.
• Dashboards and admin views built in SvelteKit are often long, card- and table-heavy pages.

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://app.example.com/dashboard",
    format: "png",
    width: 1440,
    height: 900,
    fullSize: true,
    hideCookie: true,
    delay: 2,
  }),
});

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

delay covers the gap between the initial route rendering and any load-function data or transition finishing, so a capture doesn't catch the page mid-navigation.

Practical Recommendations

• Use delay on routes with async load functions. A short delay (1-2 seconds) is usually enough to let data-driven content settle.
• Point captures at the authenticated URL directly, the same pattern as any session-protected screen — see How to Screenshot a Login-Protected SaaS App for the general approach.
• Default to fullSize: true for dashboards. SvelteKit admin views are frequently longer than a single screen.
• Strip environment indicators with hide if a staging build shows a debug ribbon or version tag.

Common Use Cases

• Visual QA before deploying a route or layout change
• Weekly dashboard snapshots for stakeholders without direct system access
• Documentation and marketing screenshots of the real product UI
• Feeding a scheduled visual monitor, as described in Visual Uptime Monitoring

Why a Direct API Call Beats a Custom Playwright Script

Teams that already use Playwright for SvelteKit component or end-to-end tests sometimes reach for it to add screenshotting too. That works, but it means owning browser versions and flaky waits as a side project. A plain HTTP call from the same TypeScript codebase hands that concern to a service built for it.

Snapshot Site renders the real SvelteKit app the same way a visitor's browser would, without adding a browser dependency to your own build.