Stop Hardcoding HTML for Every Image — Use Template Variables Instead

#webdev #javascript #api #automation

Most developers generate images like this:

const html = `
  <div style="...">
    <h1>${post.title}</h1>
    <p>${post.author} · ${post.date}</p>
  </div>
`;

This works — until it doesn't.

Special characters break the HTML (&, <, > in titles)
The template grows and the string becomes harder to maintain
Reusing the same template across environments gets messy
No clear separation between design and data

A cleaner approach: template variables

Instead of interpolating values into HTML strings, pass them separately:

const response = await fetch('https://renderpix.dev/v1/render', {
  method: 'POST',
  headers: {
    'X-API-Key': 'rpx_your_key',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    html: `
      <div style="width:1200px;height:630px;background:#0f172a;
        display:flex;flex-direction:column;justify-content:center;
        padding:80px;font-family:sans-serif">
        <div style="color:#22d3ee;font-size:18px">{{domain}}</div>
        <div style="color:white;font-size:52px;font-weight:bold;line-height:1.2">
          {{title}}
        </div>
        <div style="color:#94a3b8;font-size:20px;margin-top:24px">
          {{author}} · {{date}}
        </div>
      </div>
    `,
    vars: {
      title: post.title,
      author: post.author,
      date: post.publishedAt,
      domain: 'myblog.com'
    },
    width: 1200,
    height: 630,
    format: 'png'
  })
});

The HTML template stays clean. Values are injected at render time — no string interpolation, no escaping issues.

How it works

RenderPix does a find-and-replace before rendering the page:

{{title}} → value of vars.title
{{author}} → value of vars.author
Missing key? The placeholder stays as-is — no errors thrown.

This means you can store your HTML template as a file, an environment variable, or a database field, and just swap the vars object per request.

The real power: combine with batch rendering

Template variables get interesting when you need multiple images at once.

One HTML template + N different vars objects = N unique images, one API request:

const OG_TEMPLATE = `
  <div style="width:1200px;height:630px;background:#0f172a;
    display:flex;flex-direction:column;justify-content:center;padding:80px">
    <div style="color:#22d3ee;font-size:18px;margin-bottom:16px">{{domain}}</div>
    <div style="color:white;font-size:52px;font-weight:bold;line-height:1.2">{{title}}</div>
    <div style="color:#94a3b8;font-size:20px;margin-top:24px">{{author}} · {{date}}</div>
  </div>
`;

const response = await fetch('https://renderpix.dev/v1/batch', {
  method: 'POST',
  headers: {
    'X-API-Key': 'rpx_your_key',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    items: blogPosts.map(post => ({
      html: OG_TEMPLATE,
      vars: {
        title: post.title,
        author: post.author,
        date: post.date,
        domain: 'myblog.com'
      },
      width: 1200,
      height: 630,
      format: 'png'
    }))
  })
});

const { results } = await response.json();
// results[0].url, results[1].url, ...
// 50 unique OG images. One request.

Without template variables, this would be 50 different HTML strings to maintain. With them, it's one.

Use cases

This pattern works well anywhere you have a fixed design and variable data:

OG images — one template per blog, dynamic per post
Certificates — one template per course, dynamic per student
Invoices — one template per company, dynamic per transaction
Social cards — one brand template, different content daily

Available on all plans

Template variables work on free, starter, pro, and scale — no upgrade needed to try it.

If you want to test it: renderpix.dev gives you 100 free renders/month, no credit card required.

DEV Community