typst-dynamic-og-image

Generate dynamic Open Graph images using FastAPI and Typst.

What is this?

This project is a showcase demonstrating how Open Graph images can be designed with Typst and dynamically served via FastAPI.

For this showcase, I recreated GitHub's repository OG image generation. OG images are the preview images you see when sharing a GitHub repo link on social media, Slack, Discord, etc. Instead of using static images, this project generates them on-the-fly based on URL parameters.

Generated

Original

Demo

Try it out at og.fjlein.com

Any path works — just use og.fjlein.com/{owner}/{repo} to generate a preview page with its OG image:

• og.fjlein.com/alice/awesome-project
• og.fjlein.com/your-name/your-repo

The raw png image serving endpoint is at /og/{owner}/{repo}:

• og.fjlein.com/og/fjlein/typst-dynamic-og-image

How it works

1. Typst template (og-image.typ): Defines the visual design of the OG image
2. FastAPI server (app.py): Handles requests and renders the Typst template to PNG

Tech Stack

• Typst: Modern typesetting system used for designing the image
• FastAPI: Python web framework for serving the images
• typst-py: Python bindings for Typst

Local Development

# Install dependencies
uv sync

# Run the development server
uv run fastapi dev app.py

Then open http://localhost:8000 to see the showcase.