One template, every platform's exact size.

Three approaches, one API

One template, six renders — Node.js example

Take one HTML template, one post payload, and produce a full social media preview image set in parallel. Each render goes to /v1/renderwith the platform's native width and height:

// scripts/render-social.ts
import { writeFile } from "node:fs/promises";

const SIZES = [
  { name: "twitter",      width: 1200, height: 675  },
  { name: "facebook-og",  width: 1200, height: 630  },
  { name: "linkedin-og",  width: 1200, height: 630  },
  { name: "linkedin-post",width: 1200, height: 627  },
  { name: "instagram-sq", width: 1080, height: 1080 },
  { name: "instagram-pt", width: 1080, height: 1350 },
];

function template(post: { title: string; author: string; tag: string },
                  w: number, h: number) {
  return `
    <div style="
      width: ${w}px; height: ${h}px;
      display: flex; flex-direction: column; justify-content: space-between;
      padding: ${Math.round(w * 0.06)}px;
      background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
      color: white; font-family: 'Inter', sans-serif;
    ">
      <div style="font-size: ${Math.round(w * 0.02)}px; opacity: 0.6;">
        ${post.tag}
      </div>
      <h1 style="font-size: ${Math.round(w * 0.06)}px; line-height: 1.1;
                 font-weight: 700;">
        ${post.title}
      </h1>
      <div style="font-size: ${Math.round(w * 0.018)}px;">
        ${post.author}
      </div>
    </div>`;
}

const post = { title: "Ship social cards from one template",
               author: "@jakub", tag: "Engineering" };

await Promise.all(SIZES.map(async ({ name, width, height }) => {
  const res = await fetch("https://api.codetoimage.app/v1/render", {
    method: "POST",
    headers: {
      "X-API-Key": process.env.CODETOIMAGE_API_KEY!,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      html: template(post, width, height),
      width, height, format: "png",
    }),
  });
  const buf = Buffer.from(await res.arrayBuffer());
  await writeFile(`out/social-${post.title.slice(0,20)}-${name}.png`, buf);
}));

Six renders fire in parallel, each at the platform's native resolution. Filenames follow social-[slug]-[platform].png, so your share buttons can pick the right asset deterministically.

Recommended sizes by platform

Reference current as of 2026. Platforms occasionally adjust display sizes — these dimensions stay safe because they meet or exceed documented minimums.

What you get

FAQ