DEV Community

Cover image for 🖼️ Building a Dynamic OG Image Generator with Cloudflare Workers: Edge-Powered Social Cards Made Easy
Mohammed Abdulatef
Mohammed Abdulatef

Posted on

1

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

👋 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!

Billboard image

Deploy and scale your apps on AWS and GCP with a world class developer experience

Coherence makes it easy to set up and maintain cloud infrastructure. Harness the extensibility, compliance and cost efficiency of the cloud.

Learn more

Top comments (0)

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more