Capture HTML to PNG in Next.js

1. Install

npm install @zumer/snapdom@latest

Run the capture in a browser event handler after the component has hydrated.

2. App Router — client component

Create a client component that owns the ref and capture logic. 'use client' defines a client boundary, but client components may still be prerendered. Importing SnapDOM inside the click handler keeps that import in the browser.

// app/capture/CaptureCard.tsx
'use client';

import { useRef } from 'react';

export default function CaptureCard() {
  const cardRef = useRef<HTMLDivElement>(null);

  async function handleCapture() {
    if (!cardRef.current) return;
    const { snapdom } = await import('@zumer/snapdom');
    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>Captured from a Next.js client component.</p>
      </div>
      <button onClick={handleCapture}>Capture</button>
    </div>
  );
}

Try it live

This is what CaptureCard does after hydration, running on this page. The button fires snapdom.toPng(cardRef.current) and the captured PNG appears below — all client-side, exactly like it will in your Next.js app.

3. Use it from a server page

Server components can render this client component as a child. The 'use client' boundary allows its event handler and ref; the dynamic import inside the handler runs when the user captures:

// app/capture/page.tsx
import CaptureCard from './CaptureCard';

export default function Page() {
  return (
    <main>
      <h1>SnapDOM in Next.js</h1>
      <CaptureCard />
    </main>
  );
}

4. Alternative — dynamic import (lazy load)

The handler above already loads SnapDOM on demand. You can also load the entire capture component dynamically with SSR disabled. Put this dynamic() call inside a client component:

// app/capture/CaptureLazy.tsx
'use client';

import dynamic from 'next/dynamic';

export const CaptureCard = dynamic(() => import('./CaptureCard'), {
  ssr: false,
  loading: () => <p>Loading capture tool…</p>,
});

Your server page then imports CaptureCard from this wrapper. In the pages router (pages/capture.tsx) there's no 'use client' directive and no restriction — ssr: false works directly in the page file.

5. Bonus — dynamic OG / share images

SnapDOM is great for generating share cards on the fly when the user clicks "share". Capture the rendered card to a Blob, upload it to your CDN, and use that URL as the og:image for the share link:

async function share() {
  if (!cardRef.current) return;
  const { snapdom } = await import('@zumer/snapdom');
  const blob = await snapdom.toBlob(cardRef.current, { scale: 2, format: 'png' });

  const form = new FormData();
  form.append('file', blob, 'share.png');

  await fetch('/api/upload', { method: 'POST', body: form });
}

For server-rendered OG images that don't need a real browser, Vercel's @vercel/og is a different tool — see the FAQ below.