Introduction

SvelteKit-OG is use to dynamically generate Open Graph images from an HTML+CSS template or Svelte component using fast and efficient conversion from
HTML > SVG > PNG. Based on Satori. No headless browser required.

Installation

Use your favourite package manager and add @ethercorps/sveltekit-og as your devDependency.

Usage

Create a file at /src/routes/og/+server.ts . Alternatively, you can use JavaScript by removing the types from this example.

/src/routes/new/+server.ts

import { ImageResponse } from '@ethercorps/sveltekit-og';
import type { RequestHandler } from '@sveltejs/kit';

const template = `
 <div tw="bg-gray-50 flex w-full h-full items-center justify-center">
    <div tw="flex flex-col md:flex-row w-full py-12 px-4 md:items-center justify-between p-8">
      <h2 tw="flex flex-col text-3xl sm:text-4xl font-bold tracking-tight text-gray-900 text-left">
        <span>Ready to dive in?</span>
        <span tw="text-indigo-600">Start your free trial today.</span>
      </h2>
      <div tw="mt-8 flex md:mt-0">
        <div tw="flex rounded-md shadow">
          <a href="#" tw="flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-5 py-3 text-base font-medium text-white">Get started</a>
        </div>
        <div tw="ml-3 flex rounded-md shadow">
          <a href="#" tw="flex items-center justify-center rounded-md border border-transparent bg-white px-5 py-3 text-base font-medium text-indigo-600">Learn more</a>
        </div>
      </div>
    </div>
  </div>
`;

const fontFile400 = await fetch(
	'https://raw.githubusercontent.com/etherCorps/sveltekit-og/main/static/inter-latin-ext-400-normal.woff'
);

const fontFile700 = await fetch(
	'https://raw.githubusercontent.com/etherCorps/sveltekit-og/main/static/inter-latin-ext-700-normal.woff'
);

const fontData400: ArrayBuffer = await fontFile400.arrayBuffer();
const fontData700: ArrayBuffer = await fontFile700.arrayBuffer();

export const GET: RequestHandler = async () => {
  return await ImageResponse(template, {
				height: 250,
				width: 500,
				fonts: [
						{
							name: 'Inter Latin',
							data: fontData400,
							weight: 400
						},
						{
							name: 'Inter Latin',
							data: fontData700,
							weight: 700
						}
				]
		});
};

Image Output: Live Version

Headers

Notice that our example uses TailwindCSS classes (e.g. tw="bg-gray-50"). Alternatively, your HTML can contain style attributes using any of the subset of CSS supported by Satori.

Satori supports only a subset of HTML and CSS. For full details, see Satori’s documentation. Notably, Satori only supports flex-based layouts.

Fonts

Satori supports ttf, otf, and woff font formats; woff2 is not supported. To maximize the font parsing speed, ttf or otf are recommended over woff.

By default, @ethercorps/sveltekit-og includes only 'Noto Sans' font. If you need to use other fonts, you can specify them as shown in the example. Notably, you can also import a font file that is stored locally within your project and are not required to use fetch.

Examples

Api Reference

The package exposes an ImageResponse and componentToImageResponse constructors, with the following options available.

import {ImageResponse, componentToImageResponse} from '@ethercorps/sveltekit-og'
import {SvelteComponent} from "svelte";

// ...
ImageResponse(
    element : string,
    options : {
      width ? : number = 1200
      height ? : number = 630,
      backgroundColor ? : string = "#fff"
      fonts ? : {
          name: string,
          data: ArrayBuffer,
          weight: number,
          style: 'normal' | 'italic'
      }[]
      debug ? : boolean = false
      graphemeImages ? : Record<string, string>;
      loadAdditionalAsset ? : (languageCode: string, segment: string) => Promise<SatoriOptions["fonts"] | string | undefined>;
      // Options that will be passed to the HTTP response
      status ? : number = 200
      statusText ? : string
      headers ? : Record<string, string>
    })

componentToImageResponse(
    component : typeof SvelteComponent,
    props : {}, // All export let example inside prop dictionary
    options : {
      width ? : number = 1200
      height ? : number = 630
      fonts ? : {
          name: string,
          data: ArrayBuffer,
          weight: number,
          style: 'normal' | 'italic'
      }[]
      debug ? : boolean = false
      graphemeImages ? : Record<string, string>;
      loadAdditionalAsset ? : (languageCode: string, segment: string) => Promise<SatoriOptions["fonts"] | string | undefined>;
      // Options that will be passed to the HTTP response
      status ? : number = 200
      statusText ? : string
      headers ? : Record<string, string>
    })