Render a fixed-size card in a real browser page, wait for fonts and images, then export a PNG with SnapDOM. That page can belong to the user or be controlled from Node.
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 because the exported image matches the browser preview. A backend job can produce the same artifact by opening the rendered route with Playwright or Puppeteer and injecting SnapDOM into that page. Upload the resulting Blob or decoded data URL 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 from a Node server?
Yes, through a controlled browser. SnapDOM cannot execute directly in pure Node without browser DOM APIs, but Node can load a URL or HTML into a Playwright- or Puppeteer-controlled page, inject SnapDOM, capture there and receive the data URL or encoded bytes. For one plain bitmap, the automation tool's native screenshot may be simpler.
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 demoInstall from npm