snapdok

Guides · Node.js · axios

Take a full-page screenshot in Node.js with axios

"full_page": true captures the whole document, not just the viewport — the render scrolls the page, waits for lazy-loaded images along the way, and returns one tall image. width sets the viewport width the page lays itself out at; height is measured, not guessed.

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

await writeFile("full.png", Buffer.from(res.data));
console.log(res.headers["x-page-height"], "// measured document height in CSS px");

Very tall pages hit a documented cap rather than an out-of-memory surprise: images are cut off at 20,000 CSS px, and the response says so explicitly — X-Full-Page-Truncated: 1 plus X-Page-Height with the real document height. If you need everything past the cap, ask for "tile": true and the render returns a ZIP of overlapping numbered tiles instead (covered in its own guide, linked below).

Sticky headers are the classic full-page artifact — a bar designed to follow the viewport can repeat down a scrolled capture. If a page renders oddly, try "wait_until": "networkidle" first so animations and late images settle before the scroll pass.

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-Page-HeightFull document height in CSS px.
X-Full-Page-Truncated1 when the image stops at the 20,000 px cap.
X-Full-Page-Max-HeightThe cap itself.

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

Related guides

Same task, other stacks

More with Node.js + axios