Use the official TypeScript SDK when you want typed payloads, a single client for screenshot, analyze, and compare, and a faster path to production than hand-written fetch wrappers.
pnpm add @snapshot-site/sdkSNAPSHOT_SITE_API_KEY=ss_live_xxxThe TypeScript SDK wraps the Snapshot Site API in a single client. It is the lowest-friction option when your application already lives in JavaScript or TypeScript.
Use a single `SnapshotSiteClient` instance to run screenshot, analyze, and compare workflows.
The SDK is designed to reduce mistakes in request shapes and keep integrations readable.
Use it in Node.js services, background jobs, scripts, and full-stack application backends.
You can move from API key to working integration without rebuilding auth, paths, and request plumbing yourself.
Install `@snapshot-site/sdk` in your app
Set `SNAPSHOT_SITE_API_KEY` in your environment
Instantiate `SnapshotSiteClient`
Call `screenshot`, `analyze`, or `compare` with typed payloads
Capture a page in a few lines with a single client instance.
import { SnapshotSiteClient } from "@snapshot-site/sdk";
const client = new SnapshotSiteClient({
apiKey: process.env.SNAPSHOT_SITE_API_KEY!,
});
const result = await client.screenshot({
url: "https://snapshot-site.com/pricing",
format: "png",
width: 1440,
fullSize: true,
hideCookie: true,
});
console.log(result.link);
Run page analysis and extract summary-oriented output.
const analysis = await client.analyze({
url: "https://snapshot-site.com",
width: 1440,
fullSize: true,
enableSummary: true,
enableQuality: true,
});
console.log(analysis.summary);
Compare two page states and inspect diff-oriented results.
const diff = await client.compare({
before: {
url: "https://snapshot-site.com/pricing",
width: 1440,
fullSize: true,
hideCookie: true,
},
after: {
url: "https://staging.snapshot-site.com/pricing",
width: 1440,
fullSize: true,
hideCookie: true,
},
threshold: 0.1,
});
console.log(diff.diff?.link);
console.log(diff.summary?.mismatchPercentage);