---
title: "SvelteKit"
description: "Generate dynamic OG images and on-demand graphics in SvelteKit with the Imejis.io API. A secure endpoint pattern that keeps your API key server-side and returns a cached image."
url: "https://www.imejis.io/apis/sveltekit"
published: "2026-07-27"
---

# SvelteKit

## SvelteKit

Generate a unique OG image for every page, or any on-demand graphic, from a single Imejis template. The pattern below uses a SvelteKit **server endpoint** as a thin proxy: your API key stays on the server, and the browser (and social crawlers) only ever see your own URL.

Set two environment variables first: `IMEJIS_API_KEY` (from your dashboard) and `IMEJIS_DESIGN_ID` (any design's ID).

```bash title=".env"
IMEJIS_API_KEY=your_api_key
IMEJIS_DESIGN_ID=your_design_id
```

### 1. A server endpoint that renders the image

This endpoint takes a `title` query param, POSTs it to Imejis as a `component.property` override, and returns the finished image. Reading the key from `$env/static/private` guarantees it never reaches the client.

```typescript showLineNumbers title="src/routes/og/+server.ts"
import { IMEJIS_API_KEY, IMEJIS_DESIGN_ID } from "$env/static/private"

import type { RequestHandler } from "./$types"

export const GET: RequestHandler = async ({ url }) => {
  const title = url.searchParams.get("title") ?? "Untitled"

  const res = await fetch(`https://render.imejis.io/v1/${IMEJIS_DESIGN_ID}`, {
    method: "POST",
    headers: {
      "dma-api-key": IMEJIS_API_KEY,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ "headline.text": title }),
  })

  return new Response(res.body, {
    headers: {
      "Content-Type": "image/jpeg",
      // Renders are deterministic, so cache aggressively at the edge/CDN.
      "Cache-Control": "public, immutable, no-transform, max-age=31536000",
    },
  })
}
```

### 2. Point your metadata at it

Reference the endpoint from a page's `<svelte:head>`, passing each page's real data. Social platforms fetch `/og?title=…` from your own domain, no key exposed.

```svelte showLineNumbers title="src/routes/blog/[slug]/+page.svelte"
<script lang="ts">
  export let data
  const ogImage = `https://your-site.com/og?title=${encodeURIComponent(
    data.title
  )}`
</script>

<svelte:head>
  <title>{data.title}</title>
  <meta property="og:image" content={ogImage} />
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:image" content={ogImage} />
</svelte:head>
```

**Override any field.** Each dynamic component exposes keys like `headline.text`, `title.color`, or `image.image`. Send only the ones you want to change. A design's overridable fields are listed in its Share / API panel.