renderpix
v1.0.0
Published
Official Node.js SDK for the RenderPix HTML-to-image API
Maintainers
ozgurdsReadme
renderpix
Official Node.js SDK for the RenderPix HTML-to-image API.
POST raw HTML, get back a pixel-perfect PNG, JPEG, or WebP. No templates, no headless browser to manage — just your HTML and CSS.
Installation
npm install renderpixQuick Start
import { RenderPix } from 'renderpix'
import fs from 'fs'
const client = new RenderPix({ apiKey: 'rpx_your_api_key' })
const result = await client.render({
html: '<h1 style="font-family: sans-serif; color: #1a1a2e">Hello, RenderPix</h1>',
width: 1200,
height: 630,
format: 'png',
})
fs.writeFileSync('output.png', result.image)
console.log(`Rendered in ${result.renderTime}ms`)Get your API key at renderpix.dev — free tier includes 100 renders/month, no credit card required.
API Reference
new RenderPix(options)
const client = new RenderPix({
apiKey: 'rpx_your_api_key', // required
baseUrl: 'https://renderpix.dev', // optional override
timeout: 30000, // optional, milliseconds (default: 30000)
})client.render(options)
Render raw HTML to an image.
const result = await client.render({
html: '<div>...</div>', // required
width: 1280, // optional, default: 1280
height: 720, // optional, default: 720
format: 'png', // optional: 'png' | 'jpeg' | 'webp', default: 'png'
quality: 90, // optional: 0–100, default: 90 (jpeg/webp only)
scale: 1, // optional: 0.5–3, default: 1 (use 2 for retina)
selector: '#card', // optional: render only this CSS selector (Pro+)
fullPage: false, // optional: capture full scrollable height (Pro+)
})Returns: RenderResult
{
image: Buffer // the rendered image
renderTime: number // duration in milliseconds
usageRemaining: number // renders left this billing period
format: ImageFormat // actual output format
width: number // output width in pixels
height: number // output height in pixels
}client.screenshot(options)
Capture a screenshot of a live URL.
const result = await client.screenshot({
url: 'https://example.com', // required
width: 1440,
height: 900,
format: 'jpeg',
quality: 85,
scale: 2,
fullPage: true, // Pro+
})Returns: same RenderResult as render()
Examples
OG Image Generator
import { RenderPix } from 'renderpix'
const client = new RenderPix({ apiKey: process.env.RENDERPIX_API_KEY! })
function buildOGTemplate(title: string, author: string): string {
return `
<!DOCTYPE html>
<html>
<head>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 1200px; height: 630px;
background: #0f172a;
display: flex; flex-direction: column;
justify-content: center; padding: 80px;
font-family: system-ui, sans-serif;
}
h1 { color: #f8fafc; font-size: 64px; font-weight: 800; line-height: 1.1; margin-bottom: 24px; }
p { color: #94a3b8; font-size: 24px; }
</style>
</head>
<body>
<h1>${title}</h1>
<p>${author}</p>
</body>
</html>
`
}
export async function generateOGImage(title: string, author: string): Promise<Buffer> {
const result = await client.render({
html: buildOGTemplate(title, author),
width: 1200,
height: 630,
format: 'png',
scale: 2,
})
return result.image
}Certificate Generator
import { RenderPix } from 'renderpix'
import fs from 'fs'
const client = new RenderPix({ apiKey: process.env.RENDERPIX_API_KEY! })
async function generateCertificate(name: string, course: string): Promise<Buffer> {
const result = await client.render({
html: `
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
<style>
body {
width: 1600px; height: 1130px;
background: #fdfaf5;
display: flex; align-items: center; justify-content: center;
font-family: system-ui, sans-serif;
}
.cert { text-align: center; padding: 80px; border: 3px solid #c9a84c; width: 1480px; height: 1010px;
display: flex; flex-direction: column; align-items: center; justify-content: center; }
h1 { font-family: 'Playfair Display', serif; font-size: 72px; color: #1a1a2e; }
.name { font-family: 'Playfair Display', serif; font-size: 56px; color: #1a1a2e; font-style: italic; margin: 32px 0; }
.course { font-size: 32px; color: #444; }
.label { font-size: 16px; letter-spacing: 4px; text-transform: uppercase; color: #c9a84c; margin-bottom: 16px; }
</style>
</head>
<body>
<div class="cert">
<div class="label">Certificate of Completion</div>
<h1>Achievement</h1>
<p style="color:#888;margin:16px 0">This certifies that</p>
<div class="name">${name}</div>
<p style="color:#888">has successfully completed</p>
<div class="course" style="margin-top:12px">${course}</div>
</div>
</body>
</html>
`,
width: 1600,
height: 1130,
format: 'png',
scale: 2,
})
return result.image
}
const cert = await generateCertificate('Jane Doe', 'Advanced TypeScript')
fs.writeFileSync('certificate.png', cert)Invoice Preview
const result = await client.render({
html: myInvoiceHTML,
width: 794, // A4 at 96dpi
height: 1123,
format: 'png',
scale: 2,
selector: '#invoice', // render only the invoice element (Pro+)
})Batch Generation with Concurrency Control
import pLimit from 'p-limit'
const limit = pLimit(5) // max 5 concurrent renders
const client = new RenderPix({ apiKey: process.env.RENDERPIX_API_KEY! })
const results = await Promise.all(
items.map(item =>
limit(() => client.render({ html: buildTemplate(item), width: 1200, height: 630 }))
)
)Error Handling
import { RenderPix, RenderPixError } from 'renderpix'
const client = new RenderPix({ apiKey: process.env.RENDERPIX_API_KEY! })
try {
const result = await client.render({ html: '<h1>Test</h1>' })
} catch (err) {
if (err instanceof RenderPixError) {
switch (err.code) {
case 'UNAUTHORIZED':
console.error('Invalid API key')
break
case 'USAGE_LIMIT':
console.error('Monthly limit reached — upgrade at renderpix.dev/pricing')
break
case 'RATE_LIMITED':
console.error('Too many requests — slow down')
break
case 'TIMEOUT':
console.error('Render timed out')
break
default:
console.error(`RenderPix error ${err.status}: ${err.message}`)
}
} else {
throw err
}
}TypeScript
The SDK is written in TypeScript and ships with full type definitions — no @types package needed.
import type { RenderOptions, RenderResult, ImageFormat } from 'renderpix'Requirements
- Node.js 18+
- No external dependencies
License
MIT