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.
pnpm i -D @ethercorps/sveltekit-og
If you are using it on with
cloudflare pages
or cloudflare workers then you have
to provide polyfills for
url. You can simply add it to your
devDependency,
To install
pnpm i -D url
Usage
Create a file at /src/routes/og/+server.ts . Alternatively, you can use JavaScript by removing the types from this example.
Route can be anything but it should have only one file +server.ts
{@html highlightedQuickEg}Then run pnpm run dev and visit localhost:5173/og to view your generated PNG. Remember that hot module reloading does not work with server routes, so if you change your HTML or CSS, hard refresh the route to see changes.
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.
{@html highlightedApiReference}