Skip to content

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`.

License

Notifications You must be signed in to change notification settings

kvnang/workers-og

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

24 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

Although Vercel’s edge runtime runs on Cloudflare Workers, the way WASM is bundled is different and causes an error when using @vercel/og on a Worker.

Another unique feature: 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. The parsing is handled by HTMLRewriter, which is part of Cloudflare Worker’s runtime API.

Getting started

Install the package on your Worker project:

npm i workers-og

Then, import it to your project. The API mimics @vercel/og closely.

import { ImageResponse } from "workers-og";

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,
    });
  },
};

About

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`.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published