Frontend Frameworks

Overview

Frontend frameworks cannot call ScreenshotAPI directly from the browser — your API key must stay on the server. The standard pattern is a lightweight backend proxy that accepts requests from your frontend and forwards them to the ScreenshotAPI endpoint.

The Proxy Pattern

Every frontend integration follows the same structure:

1. Your frontend component renders an <img> tag (or fetches a blob) from your own API route.
2. Your server-side route receives the request, calls ScreenshotAPI with the API key, and streams the image back.
3. Cache headers on your proxy route let the browser and CDN avoid repeat requests.

Browser → Your API Route → ScreenshotAPI → Image returned → Cached & displayed

React

Use the JavaScript SDK in your backend, then fetch from React components. Supports Vite, CRA, Remix, and any React setup.

function WebsiteThumbnail({ url }: { url: string }) {
  const src = `/api/screenshot?url=${encodeURIComponent(url)}&type=webp`
  return <img src={src} alt={`Screenshot of ${url}`} loading="lazy" />
}

For advanced patterns with TanStack Query, loading states, and galleries, see the full React integration guide.

Next.js

Next.js has first-class support via API routes and React Server Components. Screenshots can be fetched server-side with ISR caching.

const response = await fetch(
  `https://screenshotapi.to/api/v1/screenshot?url=${encodeURIComponent(url)}`,
  {
    headers: { 'x-api-key': process.env.SCREENSHOTAPI_KEY! },
    next: { revalidate: 3600 }
  }
)

Full walkthrough: Next.js / Vercel integration guide and the Vercel deployment guide.

Vue

Vue 3 and Nuxt apps follow the same proxy pattern. Use useFetch or useAsyncData in Nuxt for server-side data fetching, or a standard fetch call in a Vue SFC.

<script setup lang="ts">
const props = defineProps<{ url: string }>()
const src = computed(
  () => `/api/screenshot?url=${encodeURIComponent(props.url)}&type=webp`
)
</script>

<template>
  <img :src="src" :alt="`Screenshot of ${props.url}`" loading="lazy" />
</template>

Full walkthrough: Vue integration guide

Angular

Use Angular's HttpClient to fetch screenshots as blobs from your proxy endpoint.

Full walkthrough: Angular integration guide

Svelte / SvelteKit

SvelteKit server routes make excellent screenshot proxies. Use +server.ts endpoints to call ScreenshotAPI.

Full walkthrough: Svelte integration guide

Remix

Remix resource routes (loader functions returning Response objects) work perfectly as screenshot proxies.

Full walkthrough: Remix integration guide

Astro

Astro API endpoints (src/pages/api/*.ts) can proxy screenshot requests in both SSR and hybrid mode.

Full walkthrough: Astro integration guide

Further Reading

• JavaScript / TypeScript SDK — full client reference
• Screenshot API reference — all available parameters
• Generating OG Images — dynamic social images with ScreenshotAPI