Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.ogify.dev/llms.txt

Use this file to discover all available pages before exploring further.

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:
  • 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
  • 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)
  • 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
  • width, height
  • min-width, min-height, max-width, max-height
  • padding (and individual sides)
  • margin (and individual sides)
  • gap

​
Tailwind-like Utilities

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

​
Common Mappings

  • 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

​
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.