How to Export a React Component as an Image: SnapDOM

TL;DR

Use a React ref, then call snapdom.toPng(ref.current) after the component has rendered.

Copy-paste example

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

import { useRef } from 'react'
import { snapdom } from '@zumer/snapdom'

export function ShareCard() {
  const cardRef = useRef(null)
  const save = async () => {
    const capture = await snapdom(cardRef.current, { embedFonts: true })
    await capture.download({ format: 'png', filename: 'share-card' })
  }
  return <>
    <article ref={cardRef}>Your component</article>
    <button onClick={save}>Download PNG</button>
  </>
}

Why this pattern works

SnapDOM is framework-agnostic: React renders the component and SnapDOM captures the resulting DOM. A ref is more reliable than a global selector and stays scoped to the component instance.

Edit and capture component state

Change the text directly, then capture the rendered state a React ref would point to.

EDIT ME

React component state

Click this text, change it, then capture the current DOM.

The captured result will appear here.

Limits and common mistakes

For the ref pattern above, call capture after hydration rather than during server rendering. Wait for Suspense data, images and fonts if they materially affect the component. A backend capture still needs a real browser page: open the rendered route with Playwright or Puppeteer, then inject and run SnapDOM there.

Frequently asked questions

Does this work with React Server Components?

Yes. For an in-app export, put the ref and capture handler in a Client Component and run it after hydration. For server-generated output, a Node job can open the rendered route with Playwright or Puppeteer, inject SnapDOM and capture inside that browser page.

Export a React component as an image