I Built an API That Generates OG Images in 50ms — No Puppeteer Needed

Every website needs Open Graph images for social sharing. But generating them is a pain:

• 
  Puppeteer/Playwright: Spin up a headless browser, render HTML, screenshot it. Slow (~2-5 seconds), heavy (200MB+ Chrome binary), expensive to host.


• 
  Canvas libraries: Write imperative drawing code. No hot reload, no component reuse, painful text layout.


• 
  Manual design: Open Figma for each page. Doesn't scale past 10 pages.

I wanted something simpler. So I built OGPix — an API that generates beautiful OG images from URL parameters in ~50ms.

How It Works

Your og:image meta tag becomes a URL:

<meta property="og:image"

  content="https://ogpix-pi.vercel.app/api/og?title=My+Article&theme=dark&key=YOUR_KEY" />

That's it. When anyone shares your link on Twitter, LinkedIn, Slack, or Discord — they see a beautiful preview image generated on the fly.

8 Themes

• 
  Gradient — Bold purple gradient


• 
  Minimal — Clean white background


• 
  Dark — Sleek dark mode


• 
  Sunset — Warm orange tones


• 
  Ocean — Deep blue


• 
  Forest — Nature green


• 
  Mono — High contrast black & white


• 
  Branded — Your custom colors

Try them all in the interactive playground.

The Tech

• 
  Satori (not Puppeteer) renders React components to SVG, then to PNG


• Runs on Vercel Edge Functions — no cold starts, globally distributed


• Images are CDN cached — same parameters = instant response


• Built with Next.js + Supabase + Stripe
  

Next.js Example

// app/blog/[slug]/page.tsx

export async function generateMetadata({ params }) {

  const post = await getPost(params.slug);



  const ogUrl = new URL("https://ogpix-pi.vercel.app/api/og");

  ogUrl.searchParams.set("title", post.title);

  ogUrl.searchParams.set("description", post.excerpt);

  ogUrl.searchParams.set("theme", "dark");

  ogUrl.searchParams.set("key", process.env.OGPIX_KEY);



  return {

    openGraph: {

      images: [{ url: ogUrl.toString(), width: 1200, height: 630 }],

    },

  };

}

Works With Everything

It's just a URL, so it works with any framework:

• 
  Next.js — generateMetadata
  


• 
  Astro — frontmatter + layout


• 
  Hugo — partial template


• 
  WordPress — wp_head hook


• 
  Plain HTML — <meta> tag

Pricing

• 
  Free: 100 images/month (with watermark)


• 
  Starter: $9/mo — 5,000 images, no watermark


• 
  Pro: $29/mo — 50,000 images

Most personal sites never leave the free tier.

Try It

• 🎨 Playground — design your image live


• 📖 Docs — full API reference


• 🔑 Get API Key — free, 30 seconds

Would love feedback on what themes or features you'd want. What does your ideal OG image look like?