Generating a share image per page — a real PNG via `next/og`, or a standalone SVG for emails, README banners and previews.
Overview
A share-card design system you configure once and call per page — auto-fitting titles, eyebrows, badges, logos and gradients. Renders two ways from the same options: a next/og element tree (real PNG) and a zero-dependency SVG for previews, emails and icons.
Install
$ npm install @lacspace/og
Quick example
@lacspace/ogts
ogCard({ title, from, to })
Returns 1200×630 social card
Key API
ogCard(opts)next/og element tree (title, subtitle, eyebrow, badge, logo, gradient).
ogSvg(opts) / ogSvgDataUri(opts)Zero-dependency SVG string / data URI.
fitFontSize(title)The auto-fit sizing math for your own layouts.
Tips
`ogCard()` returns a Satori-compatible node — pass it straight to `new ImageResponse(ogCard({...}) as any)`.
Titles auto-fit: long headlines shrink to stay on ~3 lines, short ones stay bold. Override with `fitFontSize`.
For non-PNG contexts use `ogSvg()` / `ogSvgDataUri()` — no browser, no Satori, fully deterministic.
Zero-dependency and isomorphic — safe to import on the server, in the browser, on the edge and in React Native. It tree-shakes, so you only ship what you import.
Watch out for
`og:image` scrapers want PNG/JPEG — use `ogCard` + `next/og` for the actual social image; keep `ogSvg` for previews and emails.
Looking for the complete API and more examples? The npm page and GitHub README carry the full reference — or grab the PDF.
