Automate Social Media Image Generation with n8n + RenderPix

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!**

推荐订阅源

DEV Community