Capture HTML to PNG in React

1. Install

npm install @zumer/snapdom@latest

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.

Try it live

This is the component above, running on this page. The button fires snapdom.toPng(cardRef.current) and the captured PNG appears below. SnapDOM only sees the DOM node, so the call is identical whether React, Vue or plain HTML rendered it.

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 an object 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, { format: 'png' });
    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>
  </>
);

Export a real component

Use the React component export recipe when choosing the capture root and keeping controls outside it. For several widgets together, use the dashboard recipe. For a file to upload, adapt the PNG Blob and FormData example after the ref’s content has finished rendering.