workers-og

workers-og is a browser-less og:image generator built specifically for Cloudflare Workers. It uses Vercel’s Satori engine to convert HTML or React elements into SVG, then rasterizes to PNG with a WASM build of resvg — all without spinning up a headless browser, so it runs natively on the edge.

The API is intentionally modeled after @vercel/og’s ImageResponse, but swaps Vercel’s edge runtime for Cloudflare’s HTMLRewriter-based HTML parser and WASM bundling, so it works where @vercel/og fails inside a Worker. It’s a good fit for teams that need dynamic social-card generation for blogs, docs, or marketing pages deployed on Cloudflare’s edge network.

What You Get

• ImageResponse class with an API modeled closely on @vercel/og for near drop-in familiarity
• HTML-string input support via a custom HTMLRewriter-based parser, alongside standard React element input
• Google Fonts loading helper (loadGoogleFont) with Cloudflare edge caching built in
• PNG and SVG output formats, with configurable width/height and response headers
• Emoji rendering support via a pluggable loadAdditionalAsset asset loader

Common Use Cases

• Auto-generating social share images for blog posts and docs pages served from a Cloudflare Worker
• Building a dynamic OG-image API endpoint that renders per-request titles/avatars into a branded card
• Migrating a @vercel/og-based image route to Cloudflare Workers without rewriting rendering logic

Under The Hood

Architecture - The package exports two entry points from src/index.ts: ImageResponse (a Response subclass in src/og.ts) and loadGoogleFont (src/font.ts). ImageResponse’s constructor kicks off an async og() pipeline: it initializes the yoga-wasm-web layout engine and @resvg/resvg-wasm renderer (both bundled as vendored .wasm assets under vendors/), converts the input (a React element, or an HTML string first passed through parseHtml.ts) into an element tree, runs it through satori/wasm to produce an SVG string sized to the requested width/height, and — unless format: 'svg' is requested — rasterizes that SVG to a PNG buffer via Resvg. The HTML-string path is the most distinctive piece: parseHtml.ts uses Cloudflare’s native HTMLRewriter to stream-parse HTML into a JSON-serialized virtual DOM string (attributes handled by parseUtils.ts), which is then JSON.parsed into a Satori-compatible element tree — the README itself flags this as “error prone” and a candidate for future hardening. Tech Stack - Pure TypeScript (98.7% of the codebase) targeting the Cloudflare Workers runtime; dependencies are satori (HTML/JSX → SVG), @resvg/resvg-wasm and yoga-wasm-web (both WASM), and just-camel-case. The package is a pnpm workspace member (repo root has a sibling packages/worker demo app) built via a custom esbuild script (bin/esbuild.js) rather than tsup/rollup, with esbuild-plugin-d.ts generating declaration files; devDependencies pin @vercel/og only as a reference API, not a runtime dependency. Code Quality - There is no test suite anywhere in the repository (no *.test.*/*.spec.* files, no test runner configured) — the HTML parser’s own doc comment acknowledges it “might need more hardening / testing in the future.” Error handling is present but coarse: parseHtml’s JSON.parse failure is caught and logged, returning null rather than surfacing a typed error; WASM init functions swap on an “Already initialized” string match rather than a typed guard. Naming and module boundaries are otherwise clean and small (each file has one job: parsing, fonts, emoji, types). API Design - The public surface is deliberately minimal and familiar: one ImageResponse class and one loadGoogleFont helper, mirroring @vercel/og closely enough that the README markets it as a near drop-in replacement. Accepting either a React element or a raw HTML string as the element argument lowers the barrier for non-JSX use cases. Documentation is limited to a single README with one usage example and no generated API reference or TypeDoc site, though inline JSDoc on the Props interface provides some in-editor guidance.