Generate 10 Instagram carousel images in 3 seconds with n8n

Published May 14, 2026

Every solo operator running a content strategy eventually hits the same wall: carousel posts perform well on Instagram, but producing them manually in Figma or Canva eats 10 to 15 minutes per post. Ten posts a month is two and a half hours of tedious slide work.

There is a better path. This workflow uses n8n, Google Sheets, and a tool called RenderPix to turn a spreadsheet row into a finished 1080x1350px PNG in roughly 230 milliseconds. Ten rows takes about 3 seconds total.

Table of Contents

️ What You’re Building

The finished workflow does four things in sequence:

Reads post data (topic, title, subtitle) from a Google Sheet
Injects that data into an HTML template
Sends the HTML to RenderPix, which renders it using a pre-warmed Chromium instance
Returns a PNG ready to upload to Buffer, Later, or any scheduling tool

No design software involved at any step.

Why HTML Instead of a Design Tool?

Figma and Canva are built for humans editing visuals by hand. HTML is built for machines generating output at scale. For this use case, the advantages are concrete:

Fully dynamic: inject any data field at runtime
Version controlled: store your templates in Git
No per-template pricing: no API limits tied to individual designs
Full CSS control: fonts, gradients, spacing, layout, all in code
Fast: RenderPix renders at roughly 230ms per image with pre-warmed Chromium

Step 1: Set Up Your Google Sheet

Create a sheet with three columns: topic, title, and subtitle. Each row becomes one carousel slide. A sample data set might look like this:

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 2: Install the RenderPix Node in n8n

Open your n8n instance and navigate to Settings → Community Nodes → Install. Search for n8n-nodes-renderpix and click Install. n8n will restart automatically.

Next, add your credential. Go to Credentials → Add Credential, search for RenderPix API, and paste in your API key. You can get a free key at renderpix.dev.

‍ Step 3: Build the HTML Template

Your template is a standard HTML file with CSS for a 1080x1350px canvas and three placeholder variables: {{ topic }}, {{ title }}, and {{ subtitle }}. Here is the full template from the source workflow:

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

Step 4: Wire Up the n8n Workflow

The workflow uses four nodes. Here is how each one is configured.

Node 1: Google Sheets

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

Node 2: Code Node (inject data into HTML)

This node loops over every row and builds the HTML string with live data substituted in:

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): Storage

Connect an S3 or Google Drive node after RenderPix to save images automatically. This step is optional but useful if you want a persistent archive separate from your scheduling tool.

Person working at a desk with a laptop and books.

Step 5: Run It

Click Execute workflow. For each row in your sheet, n8n builds the HTML, sends it to RenderPix, and gets back a finished PNG. Ten rows returns ten images in roughly 3 seconds.

Results at a Glance

Render speed: ~230ms per image
Output quality: pixel-perfect, retina-ready PNGs
Scale: 2,000 renders per month on the Starter plan at $9/mo
Manual comparison: 10 to 15 minutes per post in Figma versus 3 seconds total for 10 posts

Where to Take It Next

Once the core workflow runs cleanly, there are a few natural extensions the source workflow supports:

Swap Google Sheets for Airtable as the data source
Add the Buffer n8n node to auto-upload images directly to your scheduling queue
Add a webhook trigger to generate images on demand rather than on a schedule
Use different HTML templates for different content types or brand styles

Common Pitfalls

A few things to watch before you run this at scale. The Code node requires you to paste your full CSS inside the template string, not reference an external file. If you skip that step, RenderPix will render unstyled HTML. Also, the {{ topic }} placeholder syntax in the static template is for reference only. The actual injection happens in the Code node using JavaScript template literals, so the two syntaxes are not interchangeable.

The GitHub repo for the n8n community node is at github.com/ozgurdogus/renderpixn8n. Free API keys are available at renderpix.dev.

Cagri Sarigoz( Founder )

I’m founder of BizStack at Cagri Sarigoz LLC and a passionate advocate for entrepreneurs.

With over 14 years in tech, marketing, and AI, including my role as Head of SEO at CitizenShipper and co-founder of TaleBot at Intale AI, I’m dedicated to sharing genuine, useful product insights and tips.

At BizStack, I aim to cut through the digital noise to provide clear, actionable advice.

And more than all else, I’m a father to a (always) little girl and a husband.

Contact me at [email protected] for assistance.