Certificate Generator API

The Problem

Certificate generation is still surprisingly painful

Manual tools don't scale. Code-based alternatives compromise on design quality. HTML solves both.

⚠

Canva / manual design tools

Fine for ten certificates. Impossible for ten thousand. You can't programmatically inject names, dates, and scores into a Canva template — every certificate requires manual editing and export. There's no API.

✓

HTML templates + RenderPix API

Design your certificate once in HTML and CSS. Inject recipient data with template literals. POST to the API. Get a PNG back. Generate one certificate or ten thousand with the same code — no manual steps.

⚠

html2canvas / browser-side rendering

html2canvas runs in the browser, so generation depends on the user's device and screen resolution. Cross-origin images break silently. Custom fonts may not load in time. Output quality is inconsistent and you can't generate certificates server-side.

✓

Consistent server-side rendering

RenderPix renders with headless Chrome on our servers. Every certificate comes out identically — same fonts, same resolution, same colour profile — regardless of who's requesting it or what device they're on.

Code Example

Personalised certificate in under 20 lines

Inject recipient data into an HTML template, POST to the API, receive print-ready PNG bytes.

generateCertificate.ts

Node.js · TypeScript

interface Recipient {
  name:   string
  course: string
  date:   string
}

export async function generateCertificate(r: Recipient): Promise<Buffer> {
  const html = `
    <div style="
      width:1200px; height:850px;
      background:linear-gradient(160deg,#0f172a 0%,#1e1b4b 100%);
      display:flex; flex-direction:column;
      align-items:center; justify-content:center;
      font-family:'Georgia',serif; text-align:center;
      border:12px solid rgba(167,139,250,0.4);
      box-sizing:border-box; padding:80px;
    ">
      <div style="color:#a78bfa;font-size:14px;letter-spacing:.25em;
        text-transform:uppercase;margin-bottom:24px">
        Certificate of Completion
      </div>
      <div style="color:#f8fafc;font-size:52px;font-weight:700;
        line-height:1.2;margin-bottom:20px">
        ${r.name}
      </div>
      <div style="color:#94a3b8;font-size:20px;max-width:600px;line-height:1.6">
        has successfully completed <strong style="color:#e2e8f0">${r.course}</strong>
      </div>
      <div style="color:#64748b;font-size:15px;margin-top:40px">
        Issued ${r.date}
      </div>
    </div>
  `

  const res = await fetch('https://api.renderpix.dev/v1/render', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${process.env.RENDERPIX_API_KEY}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ html, width: 1200, height: 850, format: 'png' }),
  })

  const { url } = await res.json()
  const img = await fetch(url)
  return Buffer.from(await img.arrayBuffer())
}

For bulk generation, loop over recipients and fire concurrent requests — the API is stateless and handles parallel calls without extra config.

How It Works

From template to personalised PNG in three steps

01

Design your certificate template

Write an HTML and CSS certificate layout. Use any fonts, borders, gradients, or background images. Add placeholder variables for the recipient's name, course, date, and score.

02

Inject data and POST

At generation time, substitute the placeholders with real values using template literals or a templating engine. POST the HTML to the API with your chosen dimensions.

03

Deliver the certificate

Get PNG bytes back. Store on S3, email directly to the recipient, generate a shareable download link, or display in-app. Every certificate is identical in quality.

Comparison

RenderPix vs Canva API vs html2canvas vs Puppeteer

How the four most common certificate generation approaches compare.

Tool	Programmatic & scalable	Full CSS / custom design	Server-side	Serverless-safe	Setup time
RenderPix	Yes	Yes	Yes	Yes	< 15 min
Canva API	Limited	Canva editor only	Yes	Yes	2–4 hrs
html2canvas	No	Partial	No (browser only)	No	1–2 hrs
Puppeteer	Yes	Yes	Yes	No	2–4 hrs

FAQ

Common questions

Is the output print-ready quality?

Yes. RenderPix renders with headless Chrome at the exact pixel dimensions you specify. For screen use and email delivery, 1200×850 px at 96 dpi is more than sufficient. For print-ready output at 300 dpi, use 3508×2480 px (A4 landscape) or 2480×3508 px (A4 portrait) and scale your CSS accordingly.

How do I generate certificates in bulk?

Loop over your recipients array and call the render function for each one. The API is stateless and handles concurrent requests — you can fire multiple requests in parallel with Promise.all() to maximise throughput. For very large batches (thousands), process in chunks of 10–20 concurrent requests to stay within your plan's rate limits.

What dimensions are supported?

Any width and height you pass in the request body. Common certificate sizes: 1200×850 px (landscape screen), 2480×3508 px (A4 portrait at 300 dpi), 3508×2480 px (A4 landscape at 300 dpi). There's no fixed list — you choose the dimensions per render.

Can I use custom fonts and signatures?

Yes. Reference Google Fonts with a <link> tag or embed a custom font with @font-face. For signature images, use a publicly accessible URL in an <img> tag or embed the image as a Base64 data URI. The renderer waits for all resources to load before capturing.

What does it cost for a course with 500 graduates?

500 renders costs less than $3 on the Starter plan ($9/month for 2,000 renders). For one-off batch jobs, the free tier gives you 100 renders to test with. If you run multiple cohorts per month, the Starter plan comfortably covers most online course platforms. See the pricing page for details.

Generate personalised certificates at scale

Full HTML and CSS support. No Canva, no Puppeteer. Free tier, no credit card required.

Start Free Read the Docs

Generate certificatesfrom HTML — at scale