Forem: Özgür S.

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.