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