og-image-generator

Generate dynamic Open Graph images for your website using GrabShot API.

Perfect for blogs, SaaS landing pages, and social media previews. Takes your HTML template, renders it with a real Chromium browser, and returns a PNG.

Why?

Every link shared on Twitter, Slack, Discord, or LinkedIn shows a preview image. Dynamic OG images (with the page title, author, date) get 2-3x more clicks than generic ones.

This template makes it dead simple.

Quick Start

npm install
cp .env.example .env
# Add your GrabShot API key (free: 25/month)
node generate.js --title "My Blog Post" --author "Jane Doe"

Get a Free API Key

1. Go to grabshot.dev
2. Click "Get Free API Key"
3. Copy your key into .env

Free tier: 25 screenshots/month. Paid plans start at $9/mo for 2,500.

Usage

CLI

# Basic
node generate.js --title "Hello World"

# Full options
node generate.js \
  --title "Building a Startup in 2026" \
  --author "Jane Doe" \
  --date "Feb 23, 2026" \
  --theme dark \
  --output og-image.png

As a module

const { generateOGImage } = require('./generate');

const image = await generateOGImage({
  title: 'My Post Title',
  author: 'Jane Doe',
  theme: 'dark', // 'light' | 'dark' | 'gradient'
});
// Returns Buffer (PNG)

In your build pipeline

// next.config.js or similar
const posts = getAllPosts();
for (const post of posts) {
  await generateOGImage({
    title: post.title,
    author: post.author,
    output: `public/og/${post.slug}.png`,
  });
}

Templates

Three built-in themes:

Theme	Preview
light	Clean white background, dark text
dark	Dark background, light text
gradient	Purple-blue gradient, white text

Customize by editing templates/ HTML files.

GitHub Actions

Automatically generate OG images on push:

# .github/workflows/og-images.yml
name: Generate OG Images
on:
  push:
    paths: ['content/**']
jobs:
  generate:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
      - run: npm install
      - run: node scripts/generate-all.js
        env:
          GRABSHOT_API_KEY: ${{ secrets.GRABSHOT_API_KEY }}
      - uses: stefanzweifel/git-auto-commit-action@v5
        with:
          commit_message: "chore: regenerate OG images"

API

This uses the GrabShot Screenshot API:

POST https://grabshot.dev/v1/screenshot
X-API-Key: YOUR_KEY

{
  "html": "<your template HTML>",
  "width": 1200,
  "height": 630,
  "format": "png"
}

Full API docs: grabshot.dev/docs.html

License

MIT