Dynamic OG images with Remix and Node.js

Vercel recently released @vercel/og to help developers generate Open Graph (OG) images through code with a faster approach that converts HTML and CSS to SVG. It provides a much more pleasant experience* compared to previous solutions that usually involved sluggish processes like spawning a Chromium instance and taking a screenshot of the rendered HTML.
*if you're using their Edge Runtime

Me feeling left out, running my Remix apps with Node.js

Problem is, importing @vercel/og in a Remix/Node.js project results in a cryptic error and the most straightforward alternative is to deal directly with the lower level dependencies satori and possibly resvg. This is how the Remix community member Roger Stringer (@freekrai) does it in the setup he shared on the Remix Discord server.

I love how simple @vercel/og's API is and I wanted to recreate this sweet DX in my Remix apps. So I made an alternative package to @vercel/og without any of the Edge Runtime-specific stuff to make it run in Node.js. Judge for yourself the result, this was generated just now from the API:

Feel free to open the image in a new tab and play with the query parameters.
I initially wanted to make this part of the post interactive, but I couldn't be bothered staying up all night to set up MDX 😂 Instead, I decided to use that time to open-source the code, publish it as an npm package and write this post.

How to use?

Here is how you can use it in a Remix resource route:

npm install @m5r/og

import fs from "node:fs/promises";
import type { LoaderArgs } from "@remix-run/node";
import { ImageResponse } from "@m5r/og";

export async function loader({ request }: LoaderArgs) {
	const url = new URL(request.url);
	return new ImageResponse(
		<div
			style={{
				width: "100%",
				height: "100%",
				display: "flex",
				alignItems: "center",
				justifyContent: "center",
			}}
		>
			<h1 style={{ fontSize: 72, fontFamily: "Inter" }}>
				Hello, world 👋
			</h1>
			<p style={{ fontSize: 24 }}>
				{url.searchParams.get("dynamic_content")}
			</p>
		</div>,
		{
			emoji: "noto",
			fonts: [
				{
					name: "Inter",
					data: await fs.readFile("./public/fonts/inter-regular.otf"),
					weight: 600,
					style: "normal",
				},
			],
		},
	);
}