Styles - OGify | Generate beautiful Open Graph images in minutes

When designing templates, it’s important to understand what CSS features are available. OGify relies on Satori to convert HTML/CSS into SVG, which is then rendered to PNG.

Supported CSS Properties

Satori supports a robust subset of CSS. Key properties include:

Layout

display: flex (Default for most elements)
flex-direction
justify-content
align-items
align-content
flex-wrap
flex (shorthand and individual grow/shrink/basis)
position (relative, absolute)
top, right, bottom, left

Typography

font-family - font-size - font-weight - font-style - text-align - color - line-height - letter-spacing - text-overflow (clip, ellipsis) - overflow (hidden, visible) - white-space (normal, nowrap, pre-wrap)

Visuals

background-color - background-image (linear-gradient, radial-gradient, url) - background-size, background-position, background-repeat - border (and individual sides) - border-radius - box-shadow - opacity - transform

Sizing & Spacing

width, height
min-width, min-height, max-width, max-height
padding (and individual sides)
margin (and individual sides)
gap

Supported Elements

In JSX templates, use Satori-compatible elements with the tw prop or style prop:

<div tw="flex flex-col w-full h-full">
  <div tw="text-[64px] font-bold">{params.title}</div>
  <img tw="h-16" src={params.logoUrl} />
</div>

Common elements: div, span, img, svg, path. Use htmlSnippet for inline styled text inside headings.

clsx Utility

OGify exports a clsx helper for building conditional class strings in JSX templates. It supports strings, arrays, objects, and boolean guards:

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

<div
  tw={clsx(
    "flex w-full",
    isRTL ? "flex-row-reverse text-right" : "flex-row text-left",
    { "justify-center": layout === "centered" }
  )}
/>

htmlSnippet for Inline HTML

Satori cannot render arbitrary inline HTML inside text nodes (vercel/satori#484). Use htmlSnippet to parse trusted HTML fragments into per-word flex containers:

import { htmlSnippet } from "@ogify/core";

htmlSnippet(
  '<span class="font-bold">Zero-config</span> OG images for Next.js.',
  { fontSize: 28, justify: "flex-start" }
);

Allowed tags: span, b, strong, em, i, br. Use class on <span> elements for Tailwind-like styling.

Tailwind-like Utilities

OGify includes a utility class processor (clsx + a mini-Tailwind engine) that maps class names to styles via the tw prop.

Common Mappings

Layout
Sizing
Typography
Visuals

flex, flex-row, flex-col
items-center, items-start, items-end, items-stretch
justify-center, justify-start, justify-between, justify-around
absolute, relative, inset-0

w-full, h-full, w-1/2, h-screen - p-4 (padding), px-4, py-4 - m-4 (margin), mx-4, my-4

text-center, text-left, text-right - text-xl, text-[64px] - font-bold, italic - text-black, text-white

bg-white, bg-[#ff0000]
rounded, rounded-full, rounded-xl
border, border-2, border-white

Limitations

Important Constraints - No CSS Grid: Satori does not support CSS Grid layouts. Use Flexbox instead. - No z-index: Stacking order depends on DOM order. - Limited Selectors: Pseudo-classes like :hover make no sense for static images.

For a complete list of Satori’s supported CSS, refer to the Satori Documentation.

​Supported CSS Properties

​Supported Elements

​clsx Utility

​htmlSnippet for Inline HTML

​Tailwind-like Utilities

​Common Mappings

​Limitations

Supported CSS Properties

Supported Elements

clsx Utility

htmlSnippet for Inline HTML

Tailwind-like Utilities

Common Mappings

Limitations