Screenshot API for Remix

Capturing website screenshots from Remix usually means running and scaling a headless browser yourself. With Snapraven you skip all of that — stream a screenshot straight from a Remix loader.

What you can build with Remix

Serve dynamic OG images or preview thumbnails from a Remix resource route, returning the image directly from a loader with full control over cache headers.

Example in Remix

export async function loader({ request }) {
  const target = new URL(request.url).searchParams.get('url');
  const res = await fetch(
    `https://api.snapraven.app/v1/screenshot?url=${encodeURIComponent(target)}`,
    { headers: { 'x-api-key': process.env.SNAPRAVEN_KEY } }
  );
  return new Response(await res.arrayBuffer(),
    { headers: { 'Content-Type': 'image/png' } });
}

That's the entire integration. Snapraven renders the page in a real Chromium browser and returns a PNG or JPEG. Add fullPage=true for the full scrollable page, or width/height for custom viewports.

💡 Tip for Remix

Use a resource route (a route with only a loader) that returns the image `Response`, and set `Cache-Control` so your CDN caches each captured URL.

Why developers use Snapraven with Remix

Remix screenshot API — FAQ

Where do I put the call?

In a resource route loader that returns a `Response` with the image bytes and the right content type.

How do I cache it?

Return `Cache-Control` headers from the loader so the CDN serves the captured image without re-rendering.

Other guides

Not a developer? Capture screenshots with no code in the dashboard — paste URLs and download a ZIP.

Add screenshots to your Remix app today

Get your free API key