MintRender
Sign inStart free

Compare / Satori and @vercel/og

MintRender vs Satori and @vercel/og

Satori is an open-source library that turns HTML and CSS written as JSX into an SVG. @vercel/og uses Satori and Resvg to make PNG images, for example Open Graph images, in a Vercel function.

Facts checked in the projects' own docs on 1 November 2026. Each one links its source. MintRender is not connected with these projects.

Build it yourself when

  • You are a developer, your site runs on Vercel or Next.js, and you want OG images in your own code at no extra cost.
  • Your team is happy to change the design in JSX and to deploy each change.

Pick MintRender when

  • People who do not write code change the design in an editor, and a change needs no deploy.
  • You need JPEG, WebP or PDF as well as PNG and SVG, or QR codes, barcodes and charts.
  • You do not want to load font files by hand: MintRender loads any Google font by its name.
  • You want signed links, batches from a CSV file and one bill per file, in any language or no-code tool.

What you get

What it makesSatori returns an SVG string; @vercel/og turns it into a PNG with Resvg. The pages state no JPEG or PDF output. source source
LayoutSatori's README: flexbox, grid (not subgrid or masonry) and block layout. Vercel's docs: only flexbox; grid will not work. source source
FontsYou load each font file yourself and pass its bytes; @vercel/og includes only Noto Sans. Satori's README lists TTF, OTF, WOFF and WOFF2; Vercel's docs list TTF, OTF and WOFF. source source
Bundle limit@vercel/og: at most 500 KB, including your JSX, CSS, fonts and images. source
Not supportedReact hooks such as useState, :hover, unicodeBidi; Satori says its SVG does not always match the browser. source
LicenceMPL-2.0. source

What it costs to run

  • The library is free. You pay for the functions that run it and the traffic; @vercel/og adds cache headers so the CDN keeps each image. source

MintRender's Free plan: 100 files a month, every month, no card. Paid plans start at $19 a month for 2,000 files (pricing).

The same image both ways

Satori and @vercel/og source

// app/api/og/route.tsximport { ImageResponse } from 'next/og'; export async function GET() {  return new ImageResponse(    (      <div style={{ fontSize: 40, background: 'white', width: '100%', height: '100%',                    justifyContent: 'center', alignItems: 'center' }}>        👋 Hello      </div>    ),    { width: 1200, height: 630 },  );}

MintRender

<!-- A signed link in your page; no route to deploy --><meta property="og:image"  content="https://img.mintrender.com/YOUR_TEMPLATE_ID/main.png?title=Hello&s=SIGNATURE">
  • With MintRender the design lives in a template, and your server only signs the link (see the signed links docs). The image is made the first time someone opens it, then comes from the cache.
  • To make the same image from code instead, call the render API:
curl -X POST https://mintrender.com/v1/render \  -H "Authorization: Bearer $MINTRENDER_KEY" \  -H "Content-Type: application/json" \  -d '{    "template": "YOUR_TEMPLATE_ID",    "data": {      "title": "Hello"    },    "format": "png"  }'

Sources