Guides · Node.js · axios
Capture very tall pages as numbered tiles in Node.js with axios
A single image has a height cap (20,000 CSS px) because somewhere past that, image viewers and memory both give up. "tile": true is the opt-in for pages that run past it: instead of cutting the capture off, the API returns a ZIP of numbered PNG tiles that cover the entire document.
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/changelog",
format: "png",
full_page: true,
tile: true,
},
{
headers: { "Authorization": `Bearer ${process.env.SNAPDOK_KEY}` },
responseType: "arraybuffer",
timeout: 90_000,
},
);
await writeFile("page-tiles.zip", Buffer.from(res.data));
console.log(res.headers["x-tiles"], "// how many parts are in the ZIP");
The tiles overlap on purpose: each part starts 80 px above where the previous one ended, so the seam appears in both images and nothing can fall into a gap — line up the repeated rows and you have the whole page. The archive includes a README stating each part's y-range, and the response carries the numbers too: X-Tiles (count), X-Tile-Overlap (the 80 px), and X-Page-Height.
Note the response type changes: with tiling you receive application/zip, not image/png — code that assumes an image must branch on Content-Type. Pages short enough for one image return a plain PNG even with tile set, so the branch is required, not theoretical. That asymmetry is deliberate: a screenshot is one image to almost everyone, so the archive only happens when you asked for it and the page needs it.
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 | application/zip when tiled, image/png when not needed. |
X-Tiles | Number of parts in the archive. |
X-Tile-Overlap | Vertical overlap between parts, in CSS px. |
Full parameter reference: the docs. Hard numbers on caps and timeouts: limits.
Related guides
Same task, other stacks
- Capture very tall pages as numbered tiles in Python with requests
- Capture very tall pages as numbered tiles in Python with httpx
- Capture very tall pages as numbered tiles in Node.js with built-in fetch
- Capture very tall pages as numbered tiles in PHP with cURL extension
- Capture very tall pages as numbered tiles in Ruby with Net::HTTP
More with Node.js + axios
- Convert a URL to PDF
- Take a full-page screenshot
- Take a retina-quality (2x) screenshot
- Take a JPEG screenshot at a custom viewport size
- Use the 24-hour render cache to cut costs
- Take a screenshot of a URL
- Capture a JavaScript-heavy page after it settles
- Wait for a specific element before capturing
- Add page numbers and headers to a PDF