DEV Community: Özgür S.

Automate Instagram Carousel Posts with n8n + RenderPix

Özgür S. — Thu, 14 May 2026 22:38:49 +0000

If you're creating Instagram carousels manually — designing each slide in Figma or Canva, exporting, uploading — you're wasting hours every week.

In this tutorial, I'll show you how to automate the entire process: take data from a spreadsheet, generate pixel-perfect carousel images, and have them ready to post in seconds.

No design tools. No manual work. Pure automation.

What We're Building

A workflow that:

Reads post data from Google Sheets (title, subtitle, date)
Injects data into an HTML template
Renders it as a 1080×1350px PNG using RenderPix
Outputs images ready to upload to Buffer, Later, or any scheduling tool

Tools used:

n8n — workflow automation
RenderPix — HTML-to-image API
Google Sheets — data source

Why HTML Instead of Figma?

Most people reach for Figma or Canva when they need visuals. But for automation, HTML is far better:

Fully dynamic — inject any data, any time
Version controlled — store templates in Git
No API limits — no per-template pricing
Developer-friendly — CSS gives you full design control
Fast — RenderPix renders in ~230ms with pre-warmed Chromium

Step 1: Install the RenderPix n8n Node

Open your n8n instance and go to:

Settings → Community Nodes → Install

Type n8n-nodes-renderpix and click Install.

n8n will restart automatically.

Step 2: Add Your RenderPix Credential

Go to Credentials → Add Credential
Search for RenderPix API
Enter your API key (get a free key at renderpix.dev)
Save

Step 3: Build the HTML Template

Here's a clean Instagram carousel slide template (1080×1350px):

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      width: 1080px;
      height: 1350px;
      font-family: 'Arial', sans-serif;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .card {
      width: 900px;
      text-align: center;
      color: white;
    }
    .label {
      font-size: 18px;
      font-weight: 600;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      opacity: 0.7;
      margin-bottom: 24px;
    }
    .title {
      font-size: 72px;
      font-weight: 800;
      line-height: 1.1;
      margin-bottom: 32px;
    }
    .divider {
      width: 80px;
      height: 4px;
      background: rgba(255,255,255,0.5);
      margin: 0 auto 32px;
      border-radius: 2px;
    }
    .subtitle {
      font-size: 28px;
      opacity: 0.85;
      line-height: 1.5;
    }
    .footer {
      position: absolute;
      bottom: 60px;
      left: 0;
      right: 0;
      text-align: center;
      font-size: 18px;
      opacity: 0.5;
      letter-spacing: 0.1em;
    }
  </style>
</head>
<body>
  <div class="card">
    <div class="label">{{ topic }}</div>
    <div class="title">{{ title }}</div>
    <div class="divider"></div>
    <div class="subtitle">{{ subtitle }}</div>
  </div>
  <div class="footer">@youraccount</div>
</body>
</html>

The {{ title }}, {{ topic }}, and {{ subtitle }} placeholders will be replaced dynamically by n8n.

Step 4: Set Up Google Sheets

Create a sheet with these columns:

topic	title	subtitle
Productivity	5 habits that changed my life	Start small. Stay consistent.
Design	Why white space matters	Less is always more.
Marketing	The hook formula	Attention → Interest → Action

Step 5: Build the n8n Workflow

Node 1: Google Sheets (Read rows)

Operation: Get Many
Sheet: your spreadsheet
Return All: ✅

Node 2: Code Node (Build HTML)

Add a Code node to inject data into the template:

const items = [];

for (const item of $input.all()) {
  const { topic, title, subtitle } = item.json;

  const html = `
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <style>
        /* paste your CSS here */
      </style>
    </head>
    <body>
      <div class="card">
        <div class="label">${topic}</div>
        <div class="title">${title}</div>
        <div class="divider"></div>
        <div class="subtitle">${subtitle}</div>
      </div>
      <div class="footer">@youraccount</div>
    </body>
    </html>
  `;

  items.push({ json: { html, topic, title } });
}

return items;

Node 3: RenderPix

Operation: Render HTML
HTML: {{ $json.html }}
Width: 1080
Height: 1350
Format: PNG
Return as: Binary

Node 4: (Optional) Upload to S3 or Google Drive

Connect any storage node to save the images automatically.

Step 6: Run the Workflow

Click Execute workflow. For each row in your sheet, n8n will:

Build the HTML with your data
Send it to RenderPix
Return a pixel-perfect 1080×1350px PNG

A sheet with 10 rows = 10 carousel images in ~3 seconds.

Results

Here's what you get:

Speed: ~230ms per image
Quality: Pixel-perfect, retina-ready
Scale: 2,000 renders/month on Starter plan ($9)
Flexibility: Change the template, re-run, done

Compare that to designing each slide manually in Figma — 10-15 minutes per post becomes 3 seconds total.

Taking It Further

Once you have this working, you can extend it:

Connect to Airtable instead of Google Sheets
Auto-upload to Buffer using the Buffer n8n node
Add a webhook trigger to generate images on demand
Use different templates for different content types

Conclusion

HTML-to-image rendering is one of the most underrated automation tricks. Once you have a template, generating 100 carousel posts takes the same time as generating 1.

If you try this workflow, drop a comment — I'd love to see what you build.

Links:

Install node: n8n-nodes-renderpix (Settings → Community Nodes)
GitHub: github.com/ozgurdogus/renderpixn8n
Free API key: renderpix.dev

Automate Social Media Image Generation with n8n + RenderPix

Özgür S. — Tue, 12 May 2026 11:41:52 +0000

TL;DR: Automated image generation workflow — Schedule dynamic HTML → render pixel-perfect PNG/JPEG → post to Instagram automatically. Build with n8n and RenderPix HTML-to-image API. 80% cheaper than Bannerbear.

The Problem I Solved

Last month, I was building RenderPix — an HTML-to-image API. After launch, I dug into usage logs from my first customer and found something interesting:

They weren't generating OG images or PDFs like I expected. They were scheduling dynamic HTML renders on a repeating cycle — 1080×1350 PNG, every day, to feed a content calendar.

They were automating social media image generation.

That's when it clicked: developers use n8n and Make.com way more than I anticipated for visual automation. And they're tired of template-locked solutions.

This post shows you how to build an automated image generation pipeline with n8n workflows and the RenderPix API.

What We're Building

An n8n automation workflow that:

Triggers daily (or on-demand via webhook)
Generates dynamic HTML (quotes, stats, seasonal content)
Renders to PNG/JPEG via RenderPix HTML-to-image API
Saves to cloud storage (Google Drive, S3, etc.)
Posts to Instagram (optional: via Buffer, Later, or manual upload)

Cost comparison:

RenderPix Starter: $9/month = 2,000 renders/month = $0.0045 per image
Bannerbear Starter: $49/month = 2,000 renders/month = $0.025 per image
Savings: 82% cheaper with RenderPix

Step 1: Set Up RenderPix

Get Your API Key

Go to renderpix.dev
Click "Get Started" → sign up with email
Verify magic link
Copy your API key from the dashboard
Plan: Free tier (100/month) for testing, Starter ($9) for production

Test Locally

Using Node.js:

const axios = require('axios');

const html = `


      Monday Motivation
      "Build something people love."
      — Your Name


`;

axios.post('https://renderpix.dev/v1/render', {
  html,
  width: 1080,
  height: 1350,
  format: 'png',
  quality: 90
}, {
  headers: { 'X-API-Key': 'YOUR_API_KEY' }
})
.then(res => {
  // res.data is the PNG buffer
  console.log('Image rendered:', res.headers['x-render-time'], 'ms');
})
.catch(err => console.error(err.response?.data || err.message));

Response headers:

Content-Type: image/png
X-Render-Time: 234ms
X-Usage-Remaining: 1999/2000

Step 2: Build the n8n Automation Workflow

Workflow Overview — Automated Image Generation Pipeline

Schedule Trigger (Daily)
↓
[Generate Dynamic HTML] — JavaScript node with dynamic content
↓
[Call RenderPix HTML-to-Image API] — POST /v1/render endpoint
↓
[Save Image to Google Drive] — Store rendered PNG + metadata
↓
[Notify via Slack] — Optional: log successful render

2.1 Create the Schedule Trigger

In n8n, create New Workflow
Click + → search Schedule Trigger
Set to Daily at 08:00 AM UTC
Click ✓

2.2 Generate Dynamic HTML

Add a JavaScript node
Paste this code:

const today = new Date();
const dayOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][today.getDay()];
const date = today.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });

// Rotate quotes daily
const quotes = [
  "Build something people love.",
  "Shipping beats perfection.",
  "Your users are waiting.",
  "Done is better than perfect.",
  "Focus on the problem, not the tool."
];
const quote = quotes[today.getDate() % quotes.length];

const html = `
<div style="
  width: 1080px;
  height: 1350px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Segoe UI', sans-serif;
  color: white;
  text-align: center;
  padding: 40px;
  box-sizing: border-box;
">
  <div>
    <h2 style="font-size: 48px; margin: 0; opacity: 0.9;">${dayOfWeek}</h2>
    <h1 style="font-size: 72px; margin: 20px 0 40px; font-weight: bold;">${date}</h1>
    <blockquote style="font-size: 36px; margin: 40px 0; font-style: italic; border-left: 4px solid rgba(255,255,255,0.5); padding-left: 30px;">
      "${quote}"
    </blockquote>
    <p style="font-size: 18px; margin-top: 60px; opacity: 0.8;">📱 Share your journey today</p>
  </div>
</div>
`;

return {
  html,
  filename: `social-${today.toISOString().split('T')[0]}.png`
};

Click Execute to test → you should see html and filename in output

2.3 Call RenderPix HTML-to-Image API

Add HTTP Request node
Set Method to POST
URL: https://renderpix.dev/v1/render (RenderPix API endpoint)
Authentication: None (we'll use API key header)
Headers tab:
- Key: X-API-Key
- Value: YOUR_API_KEY (paste from RenderPix dashboard)
Body (Raw JSON) — RenderPix render request:

{
  "html": "{{ $node[\"JavaScript\"].json.html }}",
  "width": 1080,
  "height": 1350,
  "format": "png",
  "quality": 90
}

Response Format: Binary
Click Execute → should return PNG binary image data

2.4 Save to Google Drive

Add Google Drive node
Click Connect Account (OAuth)
Operation: Upload File
File Name: {{ $node["JavaScript"].json.filename }}
Binary Data Property Name: data (from HTTP response)
Folder ID: (optional, root by default)
Click Execute

Result: Image saved to your Google Drive with timestamp filename

2.5 (Optional) Slack Notification

Add Slack node
Connect your Slack workspace
Operation: Send Message
Channel: #content or #automations
Message:
✅ Daily social image generated and saved!
📁 File: {{ $node["Google Drive"].json.result.name }}
⏱️ Rendered in {{ $node["HTTP Request"].json.X-Render-Time }}ms
📊 Remaining quota: {{ $node["HTTP Request"].json.X-Usage-Remaining }} renders
Click Execute

Step 3: Customize for Your Use Case

Template Variations

Quote of the Day (shown above)

Use array rotation or API (e.g., Quotable.io)
Change colors, fonts, layout

Marketing Stats

const stats = {
  subscribers: Math.floor(Math.random() * 10000) + 5000,
  growth: (Math.random() * 15 + 5).toFixed(1)
};

const html = `
<div style="...">
  <h1>${stats.subscribers.toLocaleString()} Subscribers</h1>
  <p>+${stats.growth}% this month</p>
</div>
`;

Seasonal/Holiday Graphics

const isBirthday = (today.getMonth() === 5 && today.getDate() === 15); // June 15
const bgColor = isBirthday ? '#FFD700' : '#667eea';

Database-Driven Content

Query Airtable, Google Sheets, or PostgreSQL
Render different content per day/week

// Example: fetch from Airtable
const airtableData = $input.first().json;
const html = `
  <h1>${airtableData.title}</h1>
  <p>${airtableData.description}</p>
`;

Step 4: Deployment & Scheduling

Run on Schedule

Save workflow (Ctrl+S)
Click Activate toggle (top right)
n8n will execute daily at 08:00 AM UTC
Check executions in Executions tab

Manual Trigger

During testing, use Execute Workflow button instead of schedule.

Monitor Usage

RenderPix dashboard shows renders per day
Email alerts at 80% and 100% quota
API returns X-Usage-Remaining header

Pricing Breakdown — HTML-to-Image API Comparison

Solution	Cost/month	Per-image	Renders/month	Best For
RenderPix	$9 Starter	$0.0045	2,000	Automated image generation, n8n workflows
Bannerbear	$49	$0.025	2,000	Template-based graphics
htmlcsstoimage	$50	$0.025	2,000	Simple API without pooling
Vercel OG (free)	$0	$0	50/month	Free tier, limited HTML control

RenderPix advantages for **n8n automation:**

82% cheaper than template competitors
Pre-warmed Chromium (no cold starts)
Full HTML/CSS control (no template lock-in)
Built for scheduled, high-volume rendering

Real-World Example: Automated Social Media Content Calendar

Imagine you run a SaaS. Every weekday at 9 AM, you want automated image generation for:

Custom daily quote + company branding + logo
Live metric from your database
Call-to-action button

n8n workflow with RenderPix API:

// Fetch daily stat from your API
const stat = await fetch('https://api.mycompany.com/daily-metric').then(r => r.json());

const html = `
<div style="...">
  <img src="https://mycompany.com/logo.png" style="width: 100px; margin-bottom: 20px;" />
  <h1>Today's Milestone</h1>
  <p style="font-size: 48px; font-weight: bold;">${stat.value}</p>
  <p>${stat.label}</p>
  <a href="https://mycompany.com/signup" style="
    display: inline-block;
    padding: 15px 40px;
    background: white;
    color: #667eea;
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
  ">Join us today</a>
</div>
`;

return { html };

Then your n8n workflow:

Render to PNG → RenderPix API
Save to Google Drive → organized by date
Upload to Later.com or Buffer → for social scheduling
Post across Instagram, LinkedIn, Twitter → automatically scheduled

Time saved: ~5 minutes/day × 5 days = 25 min/week = 20 hours/year

Troubleshooting

"Invalid API Key" Error

HTTP 401: Unauthorized

Copy API key again from renderpix.dev/dashboard
Check header spelling: X-API-Key (case-sensitive)
Verify no extra spaces

"Usage limit exceeded" (402)

HTTP 402: Payment Required - Quota exceeded

Upgrade plan on dashboard
Usage resets monthly (1st UTC)
Or check X-Usage-Remaining header

Large HTML Renders Slowly

If HTML > 100KB:

Split into multiple requests
Optimize images (use base64 sparingly)
Use smaller font sizes, reduce DOM complexity

Image Quality Too Low

{
  "quality": 100,  // max quality
  "format": "png"  // lossless
}

Next Steps

Sign up at renderpix.dev (free tier, no credit card)
Get your API key from the dashboard
Copy the n8n workflow concepts above into your n8n instance
Test the HTML-to-image API with the Node.js example
Activate the schedule when your automated workflow is ready
Share feedback — DM @renderpixdev on Twitter or comment below

What's Coming?

waitUntil parameter — wait for JavaScript execution before rendering
Webhook callbacks — async automated image rendering with callback URL
Batch rendering — multiple HTML renders in a single request

Resources & Links

RenderPix HTML-to-Image API Docs: https://renderpix.dev/docs
n8n Documentation: https://docs.n8n.io
n8n + RenderPix Examples: https://github.com/renderpixdev/examples
Node.js SDK: npm install renderpix — npmjs.com/package/renderpix

Have you built **automated image generation workflows? Drop a comment — I'd love to see how you're using n8n + RenderPix or what you'd build next!**

How to Auto-Generate Instagram Images with HTML and a Render API

Özgür S. — Sat, 18 Apr 2026 23:29:19 +0000

You've got a content pipeline. Posts go out every day. Someone — maybe you — is manually opening Canva, editing a template, exporting a PNG, uploading it.

There's a better way.

In this tutorial I'll show you how to build a fully automated image generation pipeline using HTML + a rendering API. The same approach I use to generate hundreds of social images programmatically.

What we're building

A scheduled script (or n8n/Make.com workflow) that:

Takes dynamic content (title, subtitle, colors)
Injects it into an HTML template
Sends it to a rendering API
Gets back a pixel-perfect PNG — ready to upload or post

No Puppeteer. No headless Chrome to maintain. No design tools.

Why HTML for image generation?

HTML + CSS is actually the most powerful "design tool" most developers already know. You get:

Full layout control with flexbox/grid
Any Google Font
Tailwind CSS (via CDN)
Dynamic data injection with template literals
Pixel-perfect consistency every time

The missing piece is rendering that HTML server-side into an image. That's what a render API does.

The API call

We'll use RenderPix — a server-side Chromium rendering API. Free tier includes 100 renders/month, no credit card needed.

curl -X POST https://renderpix.dev/v1/render \
  -H "X-API-Key: your_api_key" \
  -H "Content-Type: application/json" \
  -d '{
    "html": "<div style=\"background:#1a1a2e;color:white;width:1080px;height:1350px;display:flex;align-items:center;justify-content:center;font-size:72px;font-family:sans-serif\">Hello</div>",
    "width": 1080,
    "height": 1350,
    "format": "png"
  }' \
  --output image.png

Returns a binary PNG. That's it.

Building the HTML template

Here's a production-ready Instagram portrait template (1080×1350):

function buildPostHTML({ title, subtitle, bgColor = '#0f172a', accentColor = '#22d3ee' }) {
  return `<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap" rel="stylesheet">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      width: 1080px;
      height: 1350px;
      background: ${bgColor};
      font-family: 'Inter', sans-serif;
      color: white;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 100px;
      position: relative;
    }
    .accent-bar {
      width: 80px;
      height: 6px;
      background: ${accentColor};
      border-radius: 3px;
      margin-bottom: 48px;
    }
    h1 {
      font-size: 80px;
      font-weight: 900;
      line-height: 1.05;
      text-align: center;
      margin-bottom: 36px;
      letter-spacing: -0.02em;
    }
    p {
      font-size: 36px;
      font-weight: 400;
      text-align: center;
      color: rgba(255,255,255,0.65);
      line-height: 1.5;
      max-width: 800px;
    }
    .brand {
      position: absolute;
      bottom: 70px;
      font-size: 28px;
      font-weight: 700;
      color: ${accentColor};
      letter-spacing: 0.05em;
    }
  </style>
</head>
<body>
  <div class="accent-bar"></div>
  <h1>${title}</h1>
  <p>${subtitle}</p>
  <span class="brand">@yourbrand</span>
</body>
</html>`;
}

The render function

async function renderToImage(html, width = 1080, height = 1350) {
  const response = await fetch('https://renderpix.dev/v1/render', {
    method: 'POST',
    headers: {
      'X-API-Key': process.env.RENDERPIX_KEY,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ html, width, height, format: 'png' }),
  });

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

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

Putting it together — scheduled pipeline

import { writeFile } from 'fs/promises';

const posts = [
  {
    title: "Ship fast.\nLearn faster.",
    subtitle: "The only way to build great products is to talk to real users.",
    bgColor: "#0f172a",
    accentColor: "#22d3ee"
  },
  {
    title: "Done is better\nthan perfect.",
    subtitle: "Launch early. Iterate often. That's the whole playbook.",
    bgColor: "#1a0a2e",
    accentColor: "#a78bfa"
  }
];

async function generateAll() {
  for (const [i, post] of posts.entries()) {
    const html = buildPostHTML(post);
    const buffer = await renderToImage(html);
    await writeFile(`post-${i + 1}.png`, buffer);
    console.log(`Generated post-${i + 1}.png`);
  }
}

generateAll();

Run this with a cron job, GitHub Actions, or any scheduler.

Common social media sizes

Platform	Width	Height	Notes
Instagram Portrait	1080	1350	Best for feed reach
Instagram Square	1080	1080	Classic format
Instagram Story	1080	1920	Full screen
Twitter/X Card	1280	720	Link preview
LinkedIn Post	1200	627	Feed image

To generate multiple sizes in parallel:

const sizes = [
  { width: 1080, height: 1350, name: 'instagram-portrait' },
  { width: 1080, height: 1080, name: 'instagram-square' },
  { width: 1280, height: 720,  name: 'twitter' },
];

const buffers = await Promise.all(
  sizes.map(({ width, height }) => renderToImage(html, width, height))
);

Using Tailwind CSS

Works out of the box — just add the CDN script to your HTML head:

<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="w-[1080px] h-[1350px] bg-slate-900 flex flex-col items-center justify-center p-24">
  <h1 class="text-8xl font-black text-white text-center leading-tight">
    Your title here
  </h1>
</body>

RenderPix uses server-side Chromium so the CDN script loads and executes before the screenshot is taken.

n8n workflow (no-code)

If you prefer no-code, here's the n8n setup:

Nodes: Schedule Trigger → Code → HTTP Request → Write Binary File

Code node — builds the HTML (same template as above, using $input.first().json for data)

HTTP Request node:

Method: POST
URL: https://renderpix.dev/v1/render
Authentication: Header Auth → X-API-Key: your_key
Body: JSON with html, width, height, format
Response format: File (binary)

Make.com scenario (no-code)

Modules: Schedule → Google Sheets: Get Row → HTTP: Make a Request → Google Drive: Upload

HTTP module config:

URL: https://renderpix.dev/v1/render
Method: POST
Headers: X-API-Key: your_key
Body type: Raw / application/json
Response type: Binary

Why not Puppeteer?

You could self-host Puppeteer or Playwright. But:

Chromium binary is ~300MB
Cold starts are slow (1-3s)
Memory crashes on small servers
You maintain it when it breaks

For a content pipeline that runs on schedule, a managed render API is simpler and more reliable. The free tier covers most personal projects. Paid plans start at $9/month for 2,000 renders.

Wrapping up

The full pattern:

Build HTML with dynamic data injected via template literals
POST to render API → get PNG buffer
Save to disk, upload to S3, or pass to your posting tool

Works with any scheduler — cron, GitHub Actions, n8n, Make.com, Zapier.

If you build something with this, I'd love to see it. Drop a comment or find me at @renderpixdev.

RenderPix is what I built to solve this exact problem. Free tier available at renderpix.dev.

How to Build a Certificate Generator with HTML and CSS

Özgür S. — Sat, 18 Apr 2026 14:29:38 +0000

Every course platform, bootcamp, and online community eventually needs the same thing: certificates. And most developers reach for one of these solutions:

A design tool (Canva, Figma) — manual, doesn't scale
PDF generation libraries (PDFKit, pdfmake) — painful layout control
Canvas API — powerful but verbose and hard to style
A third-party certificate SaaS — expensive and locked-in

There's a simpler path. Certificates are just styled documents. HTML and CSS are the best layout tools ever invented. So let's use them.

In this post we'll build a certificate generator that takes a name and course title, renders a pixel-perfect certificate image, and returns it as a downloadable PNG — in under 100 lines of Node.js.

What We're Building

A Node.js endpoint that accepts a name and course title, injects them into an HTML certificate template, renders it to a 1600x1130 PNG, and returns the image for download or storage.

POST /certificates/generate
{ "name": "Jane Doe", "course": "Advanced TypeScript" }
→ returns certificate.png

Step 1: Design the Certificate Template in HTML

Here's the key insight: stop thinking about certificates as "documents" and start thinking about them as "web pages at a fixed size."

Your entire design lives in one HTML string. You have full access to Flexbox, Grid, custom fonts, gradients, borders, shadows — everything CSS offers.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Source+Sans+3:wght@300;400;600&display=swap" rel="stylesheet">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      width: 1600px;
      height: 1130px;
      background: #fdfaf5;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Source Sans 3', sans-serif;
    }

    .certificate {
      width: 1480px;
      height: 1010px;
      border: 3px solid #c9a84c;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 80px;
      text-align: center;
    }

    .certificate::before {
      content: '';
      position: absolute;
      inset: 12px;
      border: 1px solid #c9a84c;
      opacity: 0.5;
      pointer-events: none;
    }

    .corner {
      position: absolute;
      width: 60px;
      height: 60px;
      border-color: #c9a84c;
      border-style: solid;
      opacity: 0.8;
    }
    .corner.tl { top: 24px; left: 24px; border-width: 3px 0 0 3px; }
    .corner.tr { top: 24px; right: 24px; border-width: 3px 3px 0 0; }
    .corner.bl { bottom: 24px; left: 24px; border-width: 0 0 3px 3px; }
    .corner.br { bottom: 24px; right: 24px; border-width: 0 3px 3px 0; }

    .header-label {
      font-family: 'Source Sans 3', sans-serif;
      font-weight: 300;
      font-size: 16px;
      letter-spacing: 6px;
      text-transform: uppercase;
      color: #c9a84c;
      margin-bottom: 16px;
    }

    .title {
      font-family: 'Playfair Display', serif;
      font-size: 72px;
      font-weight: 700;
      color: #1a1a2e;
      line-height: 1;
      margin-bottom: 48px;
    }

    .presented-to {
      font-size: 18px;
      color: #888;
      letter-spacing: 3px;
      text-transform: uppercase;
      margin-bottom: 20px;
    }

    .recipient-name {
      font-family: 'Playfair Display', serif;
      font-size: 64px;
      color: #1a1a2e;
      font-weight: 400;
      font-style: italic;
      margin-bottom: 40px;
      line-height: 1.1;
    }

    .divider {
      width: 120px;
      height: 2px;
      background: linear-gradient(90deg, transparent, #c9a84c, transparent);
      margin: 0 auto 40px;
    }

    .for-completing {
      font-size: 18px;
      color: #888;
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-bottom: 16px;
    }

    .course-name {
      font-family: 'Playfair Display', serif;
      font-size: 36px;
      color: #1a1a2e;
      font-weight: 700;
      margin-bottom: 56px;
      max-width: 800px;
    }

    .footer {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      width: 100%;
      padding: 0 80px;
    }

    .signature-block {
      text-align: center;
    }

    .signature-line {
      width: 200px;
      height: 1px;
      background: #1a1a2e;
      margin-bottom: 8px;
    }

    .signature-label {
      font-size: 13px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: #888;
    }

    .date-block {
      text-align: center;
    }

    .date-value {
      font-family: 'Playfair Display', serif;
      font-size: 20px;
      color: #1a1a2e;
      margin-bottom: 8px;
    }

    .date-label {
      font-size: 13px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: #888;
    }
  </style>
</head>
<body>
  <div class="certificate">
    <div class="corner tl"></div>
    <div class="corner tr"></div>
    <div class="corner bl"></div>
    <div class="corner br"></div>

    <div class="header-label">Certificate of Completion</div>
    <div class="title">Achievement</div>

    <div class="presented-to">This certifies that</div>
    <div class="recipient-name">{{NAME}}</div>

    <div class="divider"></div>

    <div class="for-completing">has successfully completed</div>
    <div class="course-name">{{COURSE}}</div>

    <div class="footer">
      <div class="signature-block">
        <div class="signature-line"></div>
        <div class="signature-label">Instructor Signature</div>
      </div>
      <div class="date-block">
        <div class="date-value">{{DATE}}</div>
        <div class="date-label">Date of Completion</div>
      </div>
    </div>
  </div>
</body>
</html>

Notice the {{NAME}}, {{COURSE}}, and {{DATE}} placeholders. We'll replace these with real data in Node.js before rendering.

Step 2: The Template Function

// certificate-template.js

export function buildCertificateHTML({ name, course, date }) {
  const template = `...` // paste the HTML above here

  return template
    .replace('{{NAME}}', escapeHtml(name))
    .replace('{{COURSE}}', escapeHtml(course))
    .replace('{{DATE}}', date)
}

function escapeHtml(str) {
  return str
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
}

Always escape user input before injecting into HTML. Never skip this step.

Step 3: Render the HTML to an Image

Now we need to take that HTML string and get back a PNG. We'll send it to an HTML-to-image API — this gives us full CSS support (including web fonts) without managing a headless browser ourselves.

// render-certificate.js

export async function renderCertificate(html) {
  const response = 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: 1600,
      height: 1130,
      format: 'png',
      scale: 2
    })
  })

  if (!response.ok) {
    const error = await response.text()
    throw new Error(`Render failed: ${error}`)
  }

  return Buffer.from(await response.arrayBuffer())
}

We're using scale: 2 for retina quality — at 1x the text can look soft, especially at large font sizes. Retina output at 3200x2260 effective pixels looks sharp even when printed.

Step 4: Wire It Into Your API

// routes/certificates.js (Fastify example)

import { buildCertificateHTML } from './certificate-template.js'
import { renderCertificate } from './render-certificate.js'
import { formatDate } from './utils.js'

app.post('/certificates/generate', async (req, reply) => {
  const { name, course } = req.body

  if (!name || !course) {
    return reply.status(400).send({ error: 'name and course are required' })
  }

  const html = buildCertificateHTML({
    name,
    course,
    date: formatDate(new Date())
  })

  const imageBuffer = await renderCertificate(html)

  return reply
    .header('Content-Type', 'image/png')
    .header('Content-Disposition', `attachment; filename="certificate-${Date.now()}.png"`)
    .send(imageBuffer)
})

// utils.js
export function formatDate(date) {
  return new Intl.DateTimeFormat('en-US', {
    month: 'long',
    day: 'numeric',
    year: 'numeric'
  }).format(date)
}

Step 5: Test It

curl -X POST http://localhost:3000/certificates/generate \
  -H "Content-Type: application/json" \
  -d '{"name": "Jane Doe", "course": "Advanced TypeScript"}' \
  --output certificate.png

Open certificate.png. That's your certificate.

Going Further

Store certificates in S3 or R2

Instead of returning the buffer directly, upload it to object storage and return a URL. This way certificates are permanent and shareable.

import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3'

const s3 = new S3Client({ region: 'us-east-1' })

async function storeCertificate(buffer, certificateId) {
  await s3.send(new PutObjectCommand({
    Bucket: process.env.S3_BUCKET,
    Key: `certificates/${certificateId}.png`,
    Body: buffer,
    ContentType: 'image/png',
    ACL: 'public-read'
  }))

  return `https://${process.env.S3_BUCKET}.s3.amazonaws.com/certificates/${certificateId}.png`
}

Add a verification QR code

Generate a unique certificate ID, store it in your database, and embed a QR code linking to a verification page. Employers can scan it to confirm authenticity.

Batch generation

If you need to issue certificates to an entire cohort at once, send requests concurrently with Promise.all and a concurrency limiter like p-limit.

import pLimit from 'p-limit'

const limit = pLimit(5) // max 5 concurrent renders

const certificates = await Promise.all(
  students.map(student =>
    limit(() => generateAndStore(student))
  )
)

Multiple templates

The template function takes a plain object. Add a template parameter and switch between designs — dark theme, landscape orientation, branded variants — without changing any of your rendering logic.

Why Not Just Use a PDF Library?

PDF generation libraries like PDFKit or pdfmake give you programmatic layout control, but you're working against their API instead of with CSS. Want a gradient background? Custom. Flexbox centering? Custom. Web fonts? Depends on the library.

HTML and CSS are the most battle-tested layout system in history. Every developer already knows them. Your designer can prototype in a browser and hand you the CSS directly. The template is inspectable, editable, and version-controllable as plain text.

The tradeoff is that you need something to render that HTML. A headless browser handles it perfectly — you just don't want to run one yourself if you don't have to.

Summary

Design your certificate in HTML and CSS — you have full control over every pixel
Use template literals with escaped placeholders for dynamic data
Render via an HTML-to-image API to get a PNG back — no headless browser to manage
Use scale: 2 for retina-quality output
Store in S3/R2 and return a permanent URL for production use

The free tier at renderpix.dev gives you 100 renders/month — enough to build and test your entire certificate pipeline without spending anything.

Questions about the implementation? Drop them in the comments.

HTML to Image in Node.js — Without Puppeteer

Özgür S. — Thu, 16 Apr 2026 22:03:41 +0000

Puppeteer is the obvious choice when you first need to convert HTML to an image in Node.js. It's 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's 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 that binary is around 300 MB after extraction. Three compounding problems:

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.

The alternative: a render API

An HTML-to-image API runs Chromium in a managed pool. Your Node.js code makes an HTTP request and receives binary image data.

Factor	Puppeteer	Render API
Deployment size	+150–300 MB	0 MB added
Works on Vercel / Lambda	Rarely	Always
Cold start	1–3 s	None
System library deps	Many	None
Maintenance	Breaks on Chrome updates	API versioned

Migrating existing Puppeteer code

Before:

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;
}

After:

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());
}

Function signature identical. Return type identical. Calling code unchanged.

Writing to disk, S3, or HTTP response

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' } });

TypeScript wrapper

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());
}

Remove puppeteer from package.json. Run npm install. Watch node_modules shrink.

RenderPix has a free tier — replace your first Puppeteer function in under 10 minutes.