Svelte Component To Image

A package for easily rendering .png images from svelte components in SvelteKit. Inspired by Vercel’s OG Image Generation tool for NextJs.

Good for rendering dynamic Open Graph images quickly and effeciently without having to use canvas.

I had been using node-canvas to render social share images but hated working with it’s API. When I saw Vercel’s OG Image Generation tool I knew I had to make a similar tool for SvelteKit.

Features

Renders a normal svelte component as a png
Component props are supported for dynamic image generation
Use basic CSS like flexbox and absolute positioning (See valid CSS)
Lightweight and fast (doesn’t use canvas or puppeteer)
Load custom fonts: tff, otf, woff accepted (woff2 not accepted currently)

Demo

Check it out in action. The image below is generated from this Svelte Component.

Usage

Please check out the NPM package or the Github Repo for more information on how to use it in your project.

Make sure to read the documentation, there are some quirks about what markup and CSS Satori supports.

Troubleshooting

If you have any issues please raise them on the Github Repo and I will get back to you as quickly as I can.