HTML to Image in Node.js — Without Puppeteer

Puppeteer is the obvious choice when you first need to convert HTML to an image in Node.js. It is well-documented, flexible, and produces accurate output. Then you try to deploy it. The binary is 150–300 MB depending on the platform. It fails silently on Vercel. It crashes on underpowered Lambda functions. Cold starts add seconds to the first request. And every few months a new version of Chrome breaks something in your launch flags.

There is a simpler path: offload the render to an API and use Node's built-in fetch to get the image back. No binary dependencies, no process management, no platform restrictions.

Why Puppeteer causes deployment pain

Puppeteer bundles a full Chromium binary. On Linux (the platform most cloud functions use) that binary is around 300 MB after extraction. This creates three compounding problems:

• Bundle size limits — AWS Lambda has a 250 MB limit for unzipped deployment packages. Puppeteer alone exceeds it. Vercel's serverless functions have similar restrictions.
• Cold starts — Even when the binary fits, launching a new Chromium process takes 1–3 seconds. For a function invoked on demand, that latency appears on every uncached request.
• Missing system libraries — Chromium depends on libgbm, libnss3, libatk, and a dozen other shared libraries that are not present in minimal Lambda or Cloud Run environments. You either add them via a custom layer or use chrome-aws-lambda, which has its own maintenance burden.

puppeteer-core with a system-installed Chrome sidesteps the binary size issue, but you still need to manage the Chrome installation in your deployment environment — which is impractical for most managed hosting platforms.

The alternative: a render API

An HTML-to-image API runs Chromium in a managed pool on infrastructure built for it. Your Node.js code makes an HTTP request and receives binary image data. From your application's perspective, it is no different from calling any other API.

Migrating existing Puppeteer code

If you already have Puppeteer code, the migration is mechanical. Here is a typical screenshot function:

import puppeteer from 'puppeteer';

export async function htmlToImage(html: string, width = 1200, height = 630) {
  const browser = await puppeteer.launch({ args: ['--no-sandbox'] });
  const page    = await browser.newPage();

  await page.setViewport({ width, height });
  await page.setContent(html, { waitUntil: 'networkidle0' });

  const screenshot = await page.screenshot({ type: 'png' });
  await browser.close();

  return screenshot;
}

And the same function using the RenderPix API:

export async function htmlToImage(html: string, width = 1200, height = 630) {
  const res = await fetch('https://renderpix.dev/v1/render', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-Api-Key': process.env.RENDERPIX_API_KEY!,
    },
    body: JSON.stringify({ html, width, height, format: 'png' }),
  });

  if (!res.ok) {
    throw new Error(`Render failed: ${res.status} ${await res.text()}`);
  }

  return Buffer.from(await res.arrayBuffer());
}

The function signature is identical. The return type is the same — a Buffer of PNG bytes. Any calling code that writes the buffer to disk, streams it to S3, or sends it in an HTTP response continues to work without changes.

Writing to disk, S3, or HTTP response

The buffer returned by htmlToImage works anywhere a Buffer does. Common destinations:

import { writeFile } from 'node:fs/promises';
import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3';

const buf = await htmlToImage(myHtml, 1200, 630);

// Write to disk
await writeFile('output.png', buf);

// Upload to S3
await s3.send(new PutObjectCommand({
  Bucket: 'my-bucket',
  Key: `images/${id}.png`,
  Body: buf,
  ContentType: 'image/png',
}));

// Stream in an Express response
res.set('Content-Type', 'image/png');
res.send(buf);

// Next.js Route Handler
return new Response(buf, {
  headers: { 'Content-Type': 'image/png' },
});

Using TypeScript

If you are on TypeScript, a thin typed wrapper makes the interface explicit and easy to test:

interface RenderOptions {
  html: string;
  width?: number;
  height?: number;
  format?: 'png' | 'jpeg' | 'webp';
  quality?: number;
  deviceScaleFactor?: number;
}

export async function render(opts: RenderOptions): Promise<Buffer> {
  const { html, width = 1200, height = 630, format = 'png', ...rest } = opts;

  const res = await fetch('https://renderpix.dev/v1/render', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-Api-Key': process.env.RENDERPIX_API_KEY!,
    },
    body: JSON.stringify({ html, width, height, format, ...rest }),
  });

  if (!res.ok) {
    throw new Error(`RenderPix error ${res.status}: ${await res.text()}`);
  }

  return Buffer.from(await res.arrayBuffer());
}

Import render wherever you previously imported Puppeteer. Remove puppeteer from package.json. Run npm install and watch your node_modules shrink dramatically.

Also see: screenshot API for developers.