How-To Recipe

Generate a social card from HTML

Design the card with ordinary HTML and CSS, preview it live, then export the rendered component as a shareable image.

TL;DR

Render a fixed-size card, wait for fonts and images, then export a PNG with SnapDOM.

Copy-paste example

Install @zumer/snapdom, select the rendered element, and capture it:

await document.fonts.ready
const card = document.querySelector('#social-card')
const image = await snapdom.toPng(card, {
  width: 1200,
  height: 630,
  embedFonts: true,
  backgroundColor: '#ffffff',
})
document.querySelector('#preview').appendChild(image)

Why this pattern works

This pattern works well for user-created share cards inside browser apps because the exported image matches the card preview. Upload the resulting Blob when a permanent public URL is required.

Generate a social card

Edit the headline inside the card, then export the exact browser-rendered result.

Limits and common mistakes

Open Graph crawlers cannot run a user’s browser capture on demand. Your application still needs to store the generated image at a public URL and reference it from og:image.

Frequently asked questions

Can SnapDOM generate OG images on a Node server?

No. SnapDOM requires a real browser DOM. Use a browser worker or a server-side renderer for build-time generation.

What size should an Open Graph card be?

A common target is 1200 by 630 pixels, but verify the requirements of each destination.

Capture it in the browser

Install SnapDOM and turn the DOM your users already see into a portable image.

Open the demo Install from npm