Rendering Pipeline - OGify | Generate beautiful Open Graph images in minutes

OGify’s rendering engine (renderTemplate) converts template output into a PNG buffer through a five-step pipeline powered by Satori and Resvg.

Pipeline Overview

Font Loading

All fonts from the template (or options.fonts override) are loaded in parallel. Sources are resolved in priority order: pre-loaded data → remote url → Google Fonts API.

Markup Generation

The template renderer is called with merged parameters and render options. It returns either an HTML string or a React node tree.

Element Tree

HTML string → parsed with satori-html (class → tw)
React node → passed directly to Satori (no HTML parsing step)

SVG Rendering

Satori renders the element tree to SVG at the original width × height (default 1200 × 630). Font sizes and layout values stay correct regardless of scale.

PNG Rasterization

Resvg rasterizes the vector SVG at width × scale pixels wide (default scale = 1). See Scale & Supersampling for details.

Renderer Context

Every renderer function receives OgTemplateOptions merged with params:

type RendererContext<TParams> = OgTemplateOptions & {
  params: TParams;
};

TParams

required

Merged template parameters (sharedParams + user params from renderToImage). User values take precedence.

number

default:1200

Canvas width in pixels. Always the original dimension — not affected by scale.

number

default:630

Canvas height in pixels. Always the original dimension.

OgFontConfig[]

Font override from renderToImage options. Falls back to the template’s fonts array when omitted or empty.

OgEmojiProvider

Emoji provider override. Falls back to the template’s emojiProvider, then 'noto'.

boolean

default:false

Enable right-to-left text direction and layout mirroring.

number

default:1

Supersampling factor passed through for awareness. Templates should not use scale for layout — Satori always renders at width × height. Only Resvg uses scale for final PNG dimensions.

Return Types

type OgTemplateRenderResult = string | ReactNode;

Return type	Processing
`string`	Parsed with `satori-html`, then passed to Satori
`ReactNode`	Passed directly to Satori (recommended for JSX templates)
`Promise<...>`	Async renderers are fully supported

Returning null or undefined at the root throws a clear error instead of failing silently in the Satori pipeline.

JSX vs HTML String

JSX (Recommended)
HTML String

Return a React-like element tree using Satori-compatible elements. Use the tw prop for Tailwind-like utilities and style for inline CSS.

import { defineTemplate, clsx } from "@ogify/core";

const template = defineTemplate({
  fonts: [{ name: "Inter", weight: 400 }],
  renderer: ({ params, width, height, isRTL }) => (
    <div
      tw={clsx("flex flex-col w-full h-full p-16", isRTL && "items-end")}
      style={{ width, height }}
    >
      <div tw="text-[64px] font-bold">{params.title}</div>
    </div>
  ),
});

Save template files as .tsx and ensure your tsconfig.json has "jsx": "react-jsx".

Return an HTML markup string. Classes on class are parsed via satori-html.

renderer: ({ params, width, height, isRTL }) => `
  <div class="flex flex-col w-full h-full p-16" style="width: ${width}px; height: ${height}px;">
    <div class="text-[64px] font-bold">${params.title}</div>
  </div>
`,

HTML String Rendering

Full guide to the satori-html parsing path

Scale / Supersampling

scale only affects Resvg PNG output — not Satori layout. Templates always design against original width/height.

Scale & Supersampling

Why scale does not change layout, correct vs incorrect usage, and output dimensions

`scale`	Output PNG (1200×630 base)	Notes
`1` (default)	1200 × 630	Standard, backward compatible
`1.25`	1500 × 787	Mild quality boost
`1.5`	1800 × 945	Good balance
`2`	2400 × 1260	Recommended — @2x retina
`3`	3600 × 1890	@3x ultra
`4`	4800 × 2520	Maximum (clamped)

Pass scale via renderToImage options — not in template layout code:

const buffer = await renderer.renderToImage(
  "basic",
  { title: "Sharp Image" },
  { scale: 2 }
);

Default Dimensions

OGify uses the Open Graph protocol recommended dimensions:

Width: 1200px
Height: 630px
Aspect ratio: 1.91:1 (works across Facebook, Twitter, LinkedIn, Discord)

​Pipeline Overview

​Renderer Context

​Return Types

​JSX vs HTML String

HTML String Rendering

​Scale / Supersampling

Scale & Supersampling

​Default Dimensions

Pipeline Overview

Renderer Context

Return Types

JSX vs HTML String

Scale / Supersampling

Default Dimensions