• Next.js
• Satori

1. Main Image

https://og.qurancdn.com/api/og

Optional query parameters:

• lang - Image locale. Defaults to en.

2. Chapter Image

https://og.qurancdn.com/api/og/chapter/[chapterId]

Required parameters:

• [chapterId] - Chapter number from 1-114.

Optional query parameters:

• lang - Image locale. Defaults to en.
• verse - Verse number.

3. About the Quran Image

https://og.qurancdn.com/api/og/about-the-quran

4. Learning Plans Image

5. Media Generator Image

6. Preparing for Ramadan

7. What Is Ramadan Image

8. Explore Answers

9. Calendar

10. Beyond Ramadan

https://og.qurancdn.com/api/og/beyond-ramadan

Optional query parameters:

• lang - Image locale. Defaults to en.

This project uses Playwright for automated testing, including visual regression tests for OG images.

# Use Node.js 24
nvm use 24

# Install dependencies
yarn install

# Install Playwright browsers
npx playwright install chromium

# Run all tests (starts dev server automatically)
yarn test

# Run tests in interactive UI mode
yarn test:ui

# Update visual regression snapshots
yarn test:update-snapshots

BASE_URL=https://og.qurancdn.com yarn test

• OG Image Generation: Validates that all endpoints return valid PNG images
• Visual Regression: Compares generated images against baseline snapshots for all 12 supported languages (ar, bn, en, es, fa, fr, id, ms, nl, sw, tr, ur)