How-To Recipe

Export a React component as an image

Attach a ref to the rendered component and capture the real browser DOM in a click handler.

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

Call capture in the browser, not during server rendering. Wait for Suspense data, images and fonts if they materially affect the component.

Frequently asked questions

Does this work with React Server Components?

The component may originate on the server, but capture must run from a client component after a real DOM element exists.