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:

1. Triggers daily (or on-demand via webhook)
2. Generates dynamic HTML (quotes, stats, seasonal content)
3. Renders to PNG/JPEG via RenderPix HTML-to-image API
4. Saves to cloud storage (Google Drive, S3, etc.)
5. 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

1. Go to renderpix.dev
2. Click "Get Started" → sign up with email
3. Verify magic link
4. Copy your API key from the dashboard
5. 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

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

2.2 Generate Dynamic HTML

1. Add a JavaScript node
2. 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`
};

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

2.3 Call RenderPix HTML-to-Image API

1. Add HTTP Request node
2. Set Method to POST
3. URL: https://renderpix.dev/v1/render (RenderPix API endpoint)
4. Authentication: None (we'll use API key header)

5. Headers tab:

   • Key: X-API-Key
   • Value: YOUR_API_KEY (paste from RenderPix dashboard)

6. Body (Raw JSON) — RenderPix render request:
   

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

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

2.4 Save to Google Drive

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

Result: Image saved to your Google Drive with timestamp filename

2.5 (Optional) Slack Notification

1. Add Slack node
2. Connect your Slack workspace
3. Operation: Send Message
4. Channel: #content or #automations

5. 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

6. 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

1. Save workflow (Ctrl+S)
2. Click Activate toggle (top right)
3. n8n will execute daily at 08:00 AM UTC
4. 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

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:

1. Render to PNG → RenderPix API
2. Save to Google Drive → organized by date
3. Upload to Later.com or Buffer → for social scheduling
4. 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

1. Sign up at renderpix.dev (free tier, no credit card)
2. Get your API key from the dashboard
3. Copy the n8n workflow concepts above into your n8n instance
4. Test the HTML-to-image API with the Node.js example
5. Activate the schedule when your automated workflow is ready
6. 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!**