Guides · Node.js · axios

Take a JPEG screenshot at a custom viewport size in Node.js with axios

Two independent knobs, one request: format picks the codec ("jpeg" here — much smaller files for photographic content), and width/height set the viewport the page believes it is being viewed in. 390×844 is an iPhone-class viewport, so responsive pages serve their mobile layout — media queries fire on viewport width, no user-agent tricks needed.

Below is a complete, runnable Node.js program using axios (npm install axios). It reads your API key from the SNAPDOK_KEY environment variable — free keys take about thirty seconds and need no card.

import { writeFile } from "node:fs/promises";
import axios from "axios";

const res = await axios.post(
  "https://snapdok.io/v1/render",
  {
    url: "https://your-app.com/report/42",
    format: "jpeg",
    width: 390,
    height: 844,
  },
  {
    headers: { "Authorization": `Bearer ${process.env.SNAPDOK_KEY}` },
    responseType: "arraybuffer",
    timeout: 90_000,
  },
);

await writeFile("mobile.jpg", Buffer.from(res.data));

When to pick which format: JPEG compresses gradients and photos far better and has no alpha channel; PNG is lossless and wins on flat UI, text and sharp edges. For mobile-layout QA screenshots at a fixed viewport, JPEG cuts transfer size dramatically with no visible cost. If you need the image to sit on a transparent background, that is PNG territory.

height here is the viewport height — what "above the fold" means for this render. Without full_page you get exactly that viewport; combine full_page: true with a width and the height is measured from the document instead, at which point the viewport height only affects lazy-load behaviour. All three parameters change the cache fingerprint, so a 390-wide render and a 1280-wide render are separate cache entries — as they should be.

Same endpoint, one more trick: if the page you are rendering has a form on it, adding "pdf_forms": true to a PDF render brings it back with real, fillable AcroForm fields — a PDF people can type into, not a picture of one. How that works.

Notes for axios

The one axios setting that matters here is responseType: "arraybuffer" — axios defaults to parsing responses as JSON/text, which silently mangles binary bodies. Unlike fetch, axios does throw on non-2xx responses; the error's error.response.data will be an ArrayBuffer too (because of responseType), so decode it with Buffer.from(data).toString() when you want to read the JSON error message. Response headers arrive lower-cased on res.headers.

Response headers worth reading

Header	Meaning
`Content-Type`	image/jpeg for this request.
`X-Cache`	Each distinct width/height/format is its own cache entry.

Full parameter reference: the docs. Hard numbers on caps and timeouts: limits.

Take a JPEG screenshot at a custom viewport size in Node.js with axios

Notes for axios

Response headers worth reading

Related guides

Same task, other stacks

More with Node.js + axios