Capture HTML to PNG in React

1. Install

npm install @zumer/snapdom

SnapDOM has zero runtime dependencies and ships as an ES module — works with Vite, Create React App, Parcel, esbuild and any modern bundler out of the box.

2. Minimal capture component

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

export function CaptureCard() {
  const cardRef = useRef(null);

  const handleCapture = async () => {
    if (!cardRef.current) return;
    const img = await snapdom.toPng(cardRef.current, { scale: 2 });
    document.body.appendChild(img);
  };

  return (
    <div>
      <div ref={cardRef} className="card">
        <h3>Hello SnapDOM</h3>
        <p>This whole div will be captured.</p>
      </div>
      <button onClick={handleCapture}>Capture</button>
    </div>
  );
}

That's the entire integration. Click the button, get a PNG appended at the bottom of the document.

3. Download instead of appending

Most apps want to download the image rather than insert it. SnapDOM exposes a one-liner:

const handleDownload = async () => {
  if (!cardRef.current) return;
  const result = await snapdom(cardRef.current);
  await result.download({ format: 'png', filename: 'card' });
};

4. Keep the captured image in state

If you want to render a preview inside your component, store the image as a data URL using toBlob + URL.createObjectURL:

import { useRef, useState } from 'react';
import { snapdom } from '@zumer/snapdom';

export function CapturePreview() {
  const cardRef = useRef(null);
  const [previewUrl, setPreviewUrl] = useState(null);

  const handleCapture = async () => {
    if (!cardRef.current) return;
    const blob = await snapdom.toBlob(cardRef.current);
    setPreviewUrl(URL.createObjectURL(blob));
  };

  return (
    <>
      <div ref={cardRef}>…</div>
      <button onClick={handleCapture}>Capture</button>
      {previewUrl && <img src={previewUrl} alt="preview" />}
    </>
  );
}

Remember to revoke the object URL with URL.revokeObjectURL(previewUrl) when you're done with it to avoid leaks.

5. Reusable React hook

If you call SnapDOM from many components, extract a small hook:

// useSnapdom.js
import { useCallback, useRef } from 'react';
import { snapdom } from '@zumer/snapdom';

export function useSnapdom(options = {}) {
  const ref = useRef(null);

  const capture = useCallback(async (format = 'png') => {
    if (!ref.current) return null;
    const result = await snapdom(ref.current, options);
    return result.to(format);
  }, [options]);

  return { ref, capture };
}

Use it like this:

const { ref, capture } = useSnapdom({ scale: 2, embedFonts: true });

return (
  <>
    <div ref={ref}>…</div>
    <button onClick={() => capture('png')}>Capture</button>
  </>
);