Comparison

OGKit vs @vercel/og

@vercel/og is a solid choice if you are already deep in the Next.js and Vercel ecosystem. OGKit is the alternative when you want Open Graph images from a plain HTTPS URL — no JSX, no Edge Runtime dependency, no bundle size budget to manage.

Both produce 1200×630 PNG social preview cards. The difference is where rendering lives and how much infrastructure coupling you accept.

Quick comparison

Question	OGKit	Alternative
Rendering approach	Hosted API — one HTTPS URL, any backend.	Edge Function or Node.js route inside your Next.js app using @vercel/og.
Framework requirement	None — works with any stack that can emit a URL.	Designed around Next.js `ImageResponse` patterns (App Router is the common home).
Bundle size limit	None — templates run on OGKit’s side.	Roughly 500KB budget for the function bundle (JSX, fonts, assets) on typical Edge setups.
Platform dependency	None — embed the URL from any host, CI job, or script.	Tied to wherever you deploy that Next.js route (often Vercel for the full Edge story).
Template changes	Swap the template slug and query params — no redeploy.	Edit JSX components and redeploy your app.
Pricing model	Free watermarked tier; Pro from $19/mo and Scale from $99/mo (crypto, monthly quota).	No separate @vercel/og line item — usage shows up on Vercel meters (e.g. function invocations, data transfer) depending on your plan.
Crypto payment	Yes — Cryptomus checkout without a card.	No — billed through Vercel / card rails.

What @vercel/og does well

@vercel/og uses Satori and Resvg under the hood, which gives you JSX-to-PNG control. If you need pixel-level layout freedom and your stack already runs on Vercel, the integration is tight. Responses can be cached on a CDN in the usual Next.js way, and the library tracks the platform you deploy on.

Your project is a Next.js App Router application deployed on Vercel.
You want full JSX control over every pixel of the image layout.
You are comfortable managing font files, image assets, and bundle size within the Edge bundle budget.
You do not need to generate OG images from outside your Next.js deployment boundary.

Where @vercel/og creates friction

The core trade-off is coupling. @vercel/og runs as part of your application’s image route — usually Edge or Node depending on how you configure it.

Platform coupling. If you move hosting, you rewrite or relocate that route — the template is not a standalone HTTPS product. OGKit stays a stable third-party URL.
Bundle budget. Custom brand fonts and assets compete for the same function size limit; heavy designs hit it fast.
JSX workflow. Every template change is a code change and redeploy. OGKit swaps behavior by changing the path and query string.
Metering. There is no OG-specific SKU — cost appears as platform usage (invocations, egress, etc.) that can be harder to forecast at scale.
Runtime fit. Teams on older Pages Router or mixed runtimes may need extra wiring compared to copy-paste App Router examples.

Choose OGKit if

You want OG images from any backend — Node, Python, Go, Ruby, PHP, or a shell script publishing static HTML.
You are not on Vercel, or you want image generation independent of where the app is hosted.
You prefer predictable monthly quota (free tier, then Pro / Scale) instead of compounding platform meters alone.
Your team wants to swap templates via URL parameters, not JSX edits and redeploys.
You want to pay with crypto instead of card-only SaaS checkout.

Choose the alternative if

Your project is a Next.js App Router app on Vercel and you are happy keeping OG generation inside the repo.
You need full JSX layout control for every route.
You already run @vercel/og with fonts, tests, and caching dialed in.
Sensitive data for the card must never leave your own runtime.

Example

import type { Metadata } from "next";

const url = new URL("https://www.webmorp.art/api/og/article");
url.searchParams.set("key", process.env.OGKIT_KEY!);
url.searchParams.set("title", "Getting started");
url.searchParams.set("subtitle", "OGKit API reference");

// Works on Vercel, Railway, Fly, a VPS, or static CI — same URL
export const metadata: Metadata = {
  openGraph: { images: [url.toString()] },
  twitter: { images: [url.toString()] },
};

Frequently asked questions

Is OGKit a replacement for @vercel/og?

OGKit replaces @vercel/og for teams that want a hosted image API instead of owning an `ImageResponse` route. If you need full JSX layout control inside a Next-only project, @vercel/og remains the right primitive. If you want a URL-based API from any stack, OGKit is the replacement.

Does OGKit work inside a Next.js project on Vercel?

Yes. OGKit is a plain HTTPS API. Call it from `generateMetadata`, a Route Handler, or a Server Component — on Vercel or anywhere else. There is no Edge Runtime requirement on your side.

What happens to my OG images if I migrate off Vercel?

With @vercel/og, you move or re-host the route that renders the image. With OGKit, the public API URL stays the same — only your app’s deployment changes.

How does OGKit pricing compare to @vercel/og?

@vercel/og has no separate license; cost shows up as your hosting usage. OGKit offers a free watermarked tier and paid Pro ($19/month) and Scale ($99/month) plans with monthly image quota and crypto checkout — a direct product line item.

Can I use custom fonts with OGKit?

Templates use curated typography. On paid plans you can select from Google Fonts via the `font` query parameter where the template supports it (see the API reference). Arbitrary font file uploads are not supported — use the contact form if you have a special requirement.

Does OGKit support frameworks other than Next.js?

Yes. Any framework or static site that can put a URL in `og:image` works: Remix, Astro, SvelteKit, Nuxt, Rails, Laravel, Express, FastAPI, etc.

The same OGKit URL works whether your app runs on Vercel, Railway, Fly.io, a bare VPS, or a CI job emitting HTML.

Dynamic social preview guide Docs preview images API reference Pricing

OGKit turns one HTTPS URL into a 1200×630 Open Graph image. Read the API reference, the Open Graph SEO guide, try the Playground, or sign in to create API keys.