import puppeteer from 'puppeteer'; export async function htmlToImage(html, 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;
}
import puppeteer from 'puppeteer'; export async function htmlToImage(html, 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;
}
import puppeteer from 'puppeteer'; export async function htmlToImage(html, 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;
}
export async function htmlToImage(html, 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());
}
export async function htmlToImage(html, 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());
}
export async function htmlToImage(html, 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());
}
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',
})); // Express
res.set('Content-Type', 'image/png');
res.send(buf); // Next.js Route Handler
return new Response(buf, { headers: { 'Content-Type': 'image/png' } });
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',
})); // Express
res.set('Content-Type', 'image/png');
res.send(buf); // Next.js Route Handler
return new Response(buf, { headers: { 'Content-Type': 'image/png' } });
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',
})); // Express
res.set('Content-Type', 'image/png');
res.send(buf); // Next.js Route Handler
return new Response(buf, { headers: { 'Content-Type': 'image/png' } });
interface RenderOptions { html: string; width?: number; height?: number; format?: 'png' | 'jpeg' | 'webp'; quality?: 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());
}
interface RenderOptions { html: string; width?: number; height?: number; format?: 'png' | 'jpeg' | 'webp'; quality?: 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());
}
interface RenderOptions { html: string; width?: number; height?: number; format?: 'png' | 'jpeg' | 'webp'; quality?: 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());
} - Bundle size limits — AWS Lambda has a 250 MB unzipped limit. Puppeteer alone exceeds it. Vercel's serverless functions have similar restrictions.
- Cold starts — Launching a new Chromium process takes 1–3 seconds. That latency appears on every uncached request.
- Missing system libraries — Chromium depends on libgbm, libnss3, libatk, and others that aren't present in minimal Lambda or Cloud Run environments.
