SvelteKit
+ Pictify

Generate images with SvelteKit server endpoints and load functions.

Frameworks

About Integration

Use Pictify with SvelteKit for powerful image generation capabilities. Generate images in +server.js endpoints, prerender social cards at build time, or create dynamic images based on route parameters.

Key Capabilities

Server endpoint integration

Prerendering support

Adapter-agnostic

TypeScript support

Common Use Cases

Svelte applications

Static site generation

Dynamic server routes

Integration Guide

10 minutes

Prerequisites

SvelteKit project
A Pictify account with an API key
A template created in Pictify

Install the SDK

Add the Pictify SDK to your SvelteKit project.

Code

npm install @pictify/sdk

Configure Environment Variables

Add your Pictify credentials as environment variables.

Code

# .env
PICTIFY_API_KEY=your-api-key-here
PICTIFY_TEMPLATE_ID=your-og-template-id
PUBLIC_SITE_URL=https://yoursite.com

Variables prefixed with PUBLIC_ are exposed to the browser. Keep API keys private.

Create a Server-Only Pictify Module

Create a server-side module to initialize the Pictify client.

Code

// src/lib/server/pictify.ts
import { Pictify } from '@pictify/sdk';
import { PICTIFY_API_KEY } from '$env/static/private';

export const pictify = new Pictify({
  apiKey: PICTIFY_API_KEY
});

Files in $lib/server are never included in client bundles.

Create an API Endpoint

Create a server endpoint to generate OG images on demand.

Code

// src/routes/api/og/+server.ts
import { pictify } from '$lib/server/pictify';
import { PICTIFY_TEMPLATE_ID } from '$env/static/private';
import { redirect } from '@sveltejs/kit';
import type { RequestHandler } from './$types';

export const GET: RequestHandler = async ({ url }) => {
  const title = url.searchParams.get('title') || 'Default Title';
  const description = url.searchParams.get('description') || '';

  try {
    const result = await pictify.render({
      templateId: PICTIFY_TEMPLATE_ID,
      variables: { title, description },
      format: 'png',
      width: 1200,
      height: 630
    });

    // Redirect to the CDN-hosted image
    throw redirect(302, result.imageUrl);
  } catch (error) {
    if (error instanceof Response) throw error; // Re-throw redirects
    return new Response('Failed to generate image', { status: 500 });
  }
};

Set OG Meta Tags in Pages

Use load functions to set dynamic OG images for each page.

Code

// src/routes/blog/[slug]/+page.server.ts
import type { PageServerLoad } from './$types';
import { PUBLIC_SITE_URL } from '$env/static/public';

export const load: PageServerLoad = async ({ params }) => {
  const post = await getPost(params.slug); // Your data fetching

  const ogImageUrl = new URL('/api/og', PUBLIC_SITE_URL);
  ogImageUrl.searchParams.set('title', post.title);
  ogImageUrl.searchParams.set('description', post.excerpt);

  return {
    post,
    meta: {
      title: post.title,
      description: post.excerpt,
      ogImage: ogImageUrl.toString()
    }
  };
};

// src/routes/blog/[slug]/+page.svelte
<script lang="ts">
  import type { PageData } from './$types';
  export let data: PageData;
</script>

<svelte:head>
  <title>{data.meta.title}</title>
  <meta name="description" content={data.meta.description} />
  <meta property="og:title" content={data.meta.title} />
  <meta property="og:description" content={data.meta.description} />
  <meta property="og:image" content={data.meta.ogImage} />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:image" content={data.meta.ogImage} />
</svelte:head>

<article>
  <h1>{data.post.title}</h1>
  {@html data.post.content}
</article>

Pre-render OG Images at Build Time

Generate static OG images during the build process.

Code

// src/routes/blog/[slug]/og.png/+server.ts
import { pictify } from '$lib/server/pictify';
import { PICTIFY_TEMPLATE_ID } from '$env/static/private';
import type { RequestHandler } from './$types';

// Enable prerendering for this endpoint
export const prerender = true;

export const GET: RequestHandler = async ({ params }) => {
  const post = await getPost(params.slug);

  const result = await pictify.render({
    templateId: PICTIFY_TEMPLATE_ID,
    variables: {
      title: post.title,
      description: post.excerpt,
      author: post.author
    },
    format: 'png',
    download: true // Get bytes instead of URL
  });

  return new Response(result.buffer, {
    headers: {
      'Content-Type': 'image/png',
      'Cache-Control': 'public, max-age=31536000, immutable'
    }
  });
};

// In your +page.svelte, reference the static image:
// <meta property="og:image" content="/blog/{data.post.slug}/og.png" />

Prerendering generates the images at build time, eliminating runtime API calls.

Create a Utility Function

Build a reusable function for generating OG URLs throughout your app.

Code

// src/lib/og.ts
import { PUBLIC_SITE_URL } from '$env/static/public';

export function getOgImageUrl(params: {
  title: string;
  description?: string;
  author?: string;
}): string {
  const url = new URL('/api/og', PUBLIC_SITE_URL);

  url.searchParams.set('title', params.title);
  if (params.description) {
    url.searchParams.set('description', params.description);
  }
  if (params.author) {
    url.searchParams.set('author', params.author);
  }

  return url.toString();
}

// Usage in load functions:
import { getOgImageUrl } from '$lib/og';

return {
  ogImage: getOgImageUrl({
    title: post.title,
    description: post.excerpt
  })
};