Guides · Node.js · axios

Take a retina-quality (2x) screenshot in Node.js with axios

A default screenshot renders at 1 CSS pixel = 1 image pixel, which looks soft on any modern display and falls apart the moment a designer zooms in. "device_scale": 2 renders the page the way a MacBook does — double density — so text is crisp in decks, docs and social cards.

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: "png",
    width: 1280,
    device_scale: 2,
  },
  {
    headers: { "Authorization": `Bearer ${process.env.SNAPDOK_KEY}` },
    responseType: "arraybuffer",
    timeout: 90_000,
  },
);

await writeFile("retina.png", Buffer.from(res.data));

The arithmetic to keep in mind: pixel dimensions are width × device_scale, so 1280 wide at scale 2 produces a 2560-px-wide image with roughly 4× the bytes of the 1× version. For thumbnails that will be displayed small, 1× is cheaper and looks identical after downscaling; spend the scale factor where humans will look closely.

If you arrive from Urlbox or ApiFlash muscle memory: device_scale_factor is accepted as an alias and normalised to the same thing — both spellings even share one cache entry, so mixed codebases do not double-render. JPEG ("format": "jpeg") at scale 2 is often the sweet spot for photography-heavy pages: retina sharpness, a fraction of the PNG size.

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

HeaderMeaning
X-CacheBoth device_scale spellings hit the same cache entry.
X-RateLimit-RemainingRequests left in the current second.

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

Related guides

Same task, other stacks

More with Node.js + axios