@santi020k/og
Presets when you want them. Renderers when you need them.

Open Graph images,
ready to be seen.

Generate polished, deterministic Open Graph images from reusable presets or your own renderer. Built for Astro, Next.js, and plain Node.js.

pnpm add -D @santi020k/og
Get started →
Works anywhere Node.js runs
  • Astro
  • Next.js
  • Sharp
  • Satori
Product preset generated by @santi020k/ogSVGWebPPNG
5output formats
0framework runtime
4ready-made presets

Use a visual default today and keep the freedom to replace every pixel tomorrow.

Real generated output

Pick a starting point.
Make it yours.

These are not website mockups. Every image below is generated during this documentation site’s build using the public v0.4 preset API.

Simple Open Graph preset example

Simple

A clean default for home pages, status pages, and general sharing.

variant: 'simple'
Article Open Graph preset example

Article

Editorial composition for posts, guides, changelogs, and announcements.

variant: 'article'
Docs Open Graph preset example

Docs

Structured visual language for references, component docs, and tutorials.

variant: 'docs'
Product Open Graph preset example

Product

Product-focused framing for apps, tools, launches, and landing pages.

variant: 'product'
All examples: 1200 × 630 WebPSee the code behind them →
The useful machinery

Own the creative.
Delegate the repetitive.

Everything a production image pipeline needs, without moving your content or visual language into a framework.

01Start with a preset

Useful before customization

Choose simple, article, docs, or product. Add your copy, palette, logo, and image without owning a renderer.

02Build only what changed

Content-aware caching

Card data, dimensions, configuration, templates, fonts, and declared source files all participate in deterministic fingerprints.

03Keep the escape hatch

Custom when it matters

Move to Sharp, Satori, or encoded output only when your project needs a genuinely custom composition.

A boringly good build step

From content to card
in three moves.

  1. 01

    Describe the page

    Provide a title, description, badge, route, and optional image—or collect them from Astro content.

  2. 02

    Choose the visual

    Use a built-in preset, customize its brand and theme, or bring a Sharp or Satori renderer.

  3. 03

    Generate with confidence

    Build in parallel, skip unchanged cards, and verify committed output without mutating CI.

Ready when your content is

Make every link
look intentional.

Start with a visual preset, connect your routes or content, then customize only what makes your product distinct.

View on npm ↗Browse the source →