A dynamic Open Graph image generator built with TypeScript that runs on Azion Functions. Generate custom social media preview images on-the-fly with customizable titles, subtitles, and templates.

Install dependencies

npm install
#or
yarn install
#or
pnmp install

To start using this template with Vulcan, you need to:

Build Command: To run the application build command

pnpm run build

Run local DEV: To run the application locally with Vulcan

pnpm run dev

Once the application is running, you can generate OG images by making GET requests to the root endpoint with the following query parameters:

• title (optional): The main title text to display on the image

  • Default: "Hello, world!"
  • Example: "How functions delivers value faster with Azion"

• subtitle (optional): The subtitle text to display above the title

  • Default: "" (empty)
  • Example: "A comprehensive guide"

• type (optional): The template style to use

  • Default: "default"
  • Available options: default, dotGrid

Basic usage:

GET /?title=My Awesome Post

With subtitle:

GET /?title=My Awesome Post&subtitle=Blog Post

With custom template:

GET /?title=My Awesome Post&subtitle=Blog Post&type=dotGrid

Full example URL:

https://8v0frmzqj20.map.azionedge.net/?title=How%20functions%20delivers%20value%20faster%20with%20Azion&subtitle=A%20comprehensive%20guide&type=dotGrid

The endpoint returns a PNG image (1200x630px) that can be used directly in your HTML meta tags:

<meta property="og:image" content="https://your-domain.com/?title=My%20Post&subtitle=Blog" />
<meta name="twitter:image" content="https://your-domain.com/?title=My%20Post&subtitle=Blog" />