svelte-og-image

A simple wrapper around @vercel/og for use in Svelte projects. Just import your Svelte component and pass in values to its props.

Installation

pnpm i -D svelte-og-image

Usage

If you're using SvelteKit, create an API route that exposes a GET function. Then, import the ImageResponse class and the Svelte component you wish to render as an image.

// src/routes/og/+server.js
import { ImageResponse } from 'svelte-og-image';
import Card from './Card.svelte';
import font from './overpass-v13-latin-600.ttf';
import { read } from '$app/server';

export async function GET({ url }) {
  const fontData = await read(font).arrayBuffer();
    
  return new ImageResponse(
    Card,
    { title: 'hello world!' },
    {
      // always specify at least one font
      fonts: [
        {
          name: 'Overpass',
          data: fontData,
          weight: 600,
          style: 'normal'
        }
      ]
    }
  );
}

[!WARNING] Certain CSS features such as CSS variables and display: grid; are not compatible with Satori. Read the Satori documentation for more info.

Acknowledgements

A special thanks to Geoff Rich for breaking this down in his excellent blog post. Many of his blog posts have helped me when I first started learning Svelte in 2022 for my studies.

• satori-html
• satori