@vercel/og Alternative

Renderfy vs @vercel/og

Both render images with Satori, so let's get the honest part out of the way first: switching to Renderfy will not give you CSS grid in an OG image. What it gives you is PDF output, seven input types, no 500 KB asset budget, and renders from any runtime.

What is actually identical

@vercel/og uses Satori to turn JSX into SVG and Resvg to rasterise it to PNG. Renderfy's image engine uses the same two libraries. That means the following are true of both tools, and you should ignore any comparison page that says otherwise:

• →display: grid does not work. Layouts must be flexbox or absolutely positioned.
• →Unsupported CSS properties are ignored silently rather than throwing — the image just comes out wrong.
• →There is no JavaScript execution and no live layout pass. Whatever you send is what gets measured.

If a Satori limitation is the thing blocking you, the fix is Renderfy's PDF path — a managed headless Chromium instance with full CSS including grid, CSS variables and @media print — or restructuring the layout in flexbox. Not a different image API.

Feature comparison

Four things @vercel/og cannot do at all

1. 1. Emit a PDF. ImageResponse produces a PNG. Invoices, reports, certificates and contracts all need a second tool.
2. 2. Accept woff2 fonts. Only ttf, otf and woff are supported. The format your design system already ships is the one that fails.
3. 3. Stay under 500 KB with a real brand kit. The budget covers JSX, CSS, fonts and images together. Two weights of a custom typeface plus a logo will often exceed it on their own.
4. 4. Render anything that is not JSX. No Markdown, no Chart.js JSON, no Mermaid diagram, no syntax-highlighted code, no LaTeX.

When you should keep @vercel/og

It is free, it is already in your App Router install, and it adds CDN cache headers to computed images automatically — so a share card that never changes is generated once and served from the edge thereafter. If your cards are a title and a logo on a gradient, your fonts fit the budget, and you never need a PDF, there is no reason to add a dependency. Renderfy earns its place when one of the four blockers above becomes a ticket.

Side by side: a 1200×630 share card

// app/api/og/route.tsx
import { ImageResponse } from 'next/og';

export async function GET() {
  // Custom font: fetch the buffer yourself, and it
  // counts against the 500 KB bundle budget.
  const inter = await fetch(
    new URL('./Inter-Bold.ttf', import.meta.url)
  ).then((r) => r.arrayBuffer());

  return new ImageResponse(
    (
      <div style={{
        display: 'flex',          // grid is not supported
        width: '100%', height: '100%',
        alignItems: 'center', justifyContent: 'center',
        background: '#09090b', color: '#fafafa',
        fontSize: 64, fontFamily: 'Inter',
      }}>
        Hello
      </div>
    ),
    {
      width: 1200,
      height: 630,
      fonts: [{ name: 'Inter', data: inter, style: 'normal' }],
    }
  );
}
// Output: PNG only. No PDF path.

// app/api/og/route.ts
export async function GET() {
  const res = await fetch(
    "https://renderfy.io/api/v1/render",
    {
      method: "POST",
      headers: {
        Authorization: `Bearer ${process.env.RENDERFY_API_KEY}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        type: "tailwind",
        content: `<div class="flex h-full w-full items-center
                     justify-center bg-zinc-950">
                     <h1 class="text-6xl font-bold text-zinc-50">
                       Hello
                     </h1>
                   </div>`,
        options: {
          format: "png",                    // or "pdf"
          dimensions: { width: 1200, height: 630 },
          fonts: [{ family: "Inter", weights: [700] }],
        },
      }),
    }
  );

  return new Response(await res.arrayBuffer(), {
    headers: { "Content-Type": "image/png" },
  });
}
// Font resolved server-side by family name.
// Nothing is added to your deployment bundle.

Same flexbox constraints on the image path. The difference is that swapping format: "png" for "pdf" is a one-word change, and the font never touches your deployment bundle.