@terisback/workers-og

Cloudflare Workers OG Image Generator

Using Vercel's Satori engine, and many credits to @vercel/og for the inspiration.

An og:image (social card) generator that is fast, browser-less (no Puppeteer), and capable of running on the edge.

This package is designed to be used with Cloudflare Workers (but may be used elsewhere), with the simple API inspired by @vercel/og.

Difference from @vercel/og

@vercel/og is designed to run on Vercel's edge runtime, and workers-og on Cloudflare Workers.

While satori (used in both @vercel/og and workers-og) accepts React element as the input, workers-og adds a feature which allows you to write a simple HTML, which will here be parsed into React element-like object.

Example Usage on a Worker:

import { ImageResponse } from "workers-og";

export default {
  async fetch(
    request: Request,
    env: Env,
    ctx: ExecutionContext
  ): Promise<Response> {
    const params = new URLSearchParams(new URL(request.url).search);
    const title = params.get("title") || "Lorem ipsum";

    const html = `
    <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; width: 100vw; font-family: sans-serif; background: #160f29">
      <div style="display: flex; width: 100vw; padding: 40px; color: white;">
        <h1 style="font-size: 60px; font-weight: 600; margin: 0; font-family: 'Bitter'; font-weight: 500">${title}</h1>
      </div>
    </div>
   `;

    return new ImageResponse(html, {
      width: 1200,
      height: 630,
    });
  },
};