🖼️ Building a Dynamic OG Image Generator with Cloudflare Workers: Edge-Powered Social Cards Made Easy
#opensource#webdev#tutorial#javascript
Mohammed Abdulatef

Mohammed Abdulatef @pwrst

Joined:
Dec 25, 2019

🖼️ Building a Dynamic OG Image Generator with Cloudflare Workers: Edge-Powered Social Cards Made Easy

Publish Date: Jan 23
1 0

👋 Hey DEV community!

I’m excited to share Dynamic OG Image Generator, an open-source project I built to simplify generating dynamic Open Graph images for blogs, apps, and social media. It leverages Cloudflare Workers’ edge network for blazing-fast performance, and I’d love your feedback (and a star ⭐)!

The Problem

Social platforms like Twitter and LinkedIn rely on Open Graph images for rich link previews. But:

  • Static images get stale quickly
  • Dynamic solutions often require complex backends or paid services
  • Font/licensing issues can derail designs

This project solves those pain points with edge computing and flexible customization.

Key Features

✅ Edge-First Performance

Runs on Cloudflare Workers’ global network, generating images in <100ms.

✅ 4 Visual Styles

Pre-built templates for different use cases:

  • Modern gradients
  • Eco/tech themes
  • Branded designs (e.g., Cloudflare)
  • GitHub-style profile cards

✅ Font Loading Flexibility

Choose your strategy without licensing headaches:

// Example: Load Google Fonts  
const font = await googleFont(text, 'Noto Sans JP', 900, 'normal');  

// Or self-host fonts via GitHub  
const font = await githubFonts();
Enter fullscreen mode Exit fullscreen mode

✅ Automatic Caching

Reduce compute costs by caching fonts and generated images:

// Enable cache middleware  
og.get('/og', ...middleware.cache());
Enter fullscreen mode Exit fullscreen mode

✅ Tailwind CSS Integration

Style cards with familiar utility classes for rapid iteration.

How It Works

  1. Send a GET request with parameters: 
   /og?mainText=Hello World&description=Edge-Powered OG Magic&style=1
Enter fullscreen mode Exit fullscreen mode
  1. Get a 1200x630px social-ready image optimized for Twitter, LinkedIn, etc.

Sample Response:

OG Image Example

Quickstart Guide

  1. Clone the repo: 
   git clone https://github.com/mohdlatif/og-image-generator-cloudflare-worker
Enter fullscreen mode Exit fullscreen mode
  1. Install dependencies (uses Bun 🚀): 
   bun install
Enter fullscreen mode Exit fullscreen mode
  1. Deploy to Cloudflare: 
   bun run deploy
Enter fullscreen mode Exit fullscreen mode

For a detailed walkthrough, check out my Cloudflare Workers tutorial.

Why This Matters

  • Cost-effective: No need for dedicated image servers
  • Scalable: Workers handle spikes effortlessly
  • Customizable: Add your own styles/fonts in minutes

🔗 GitHub Repo

mohdlatif/og-image-generator-cloudflare-worker

If you find this useful:

  1. ⭐ Star the repo to help others discover it
  2. 💬 Share feedback – I’d love to hear your use cases!
  3. 🛠️ Contribute: PRs welcome for new styles, optimizations, or docs!

Let’s make dynamic OG images a solved problem for everyone! 🚀

P.S. Big thanks to the Hono and Vercel OG teams for their amazing tools!

Comments 0 total

    Add comment