Skip to content
This repository has been archived by the owner on May 28, 2023. It is now read-only.


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Generated image

🌠 Imagegen as a Service (Next.js)

Deployment status Checks status Dependabot status Code style License info

Imagegen (image generator) as a Service, built with Next.js and Vercel.

Deploy with Vercel

ℹ️ If you prefer Node.js + Docker (+ AWS, GCP, DigitalOcean, etc) to Next.js + Vercel, checkout this repository.

What is this?

This is a (REST) API service that generates dynamic images for different purposes, is especially useful to generate cover images for content distribution:

  • Blogging & writing.

  • Videos' thumbnails.

  • Open-source repositories' social images.

  • etc.

It's built and deployed serverlessly thanks to Next.js and Vercel, so there is nothing to maintain. Moreover, thanks to Vercel's generous hobby plan, this service is completely free for non-commercial use.

ℹ️ If you prefer other cloud platforms (AWS, GCP, DigitalOcean, etc) to Vercel for commercial use, checkout Node.js + Docker version.


The above image is a dynamic image generated by this service, copy and paste the URL below on your browser to see it yourself:**Imagegen**%20as%20a%20Service?&icons=Next.js&icons=Vercel

How should you use it?

There is a limit to Vercel's free plan, so feel free to test the API on my website but please don't use it directly on yours. Instead:

  • Fork the repository.

  • Make changes to fit your needs (see below, it's easy).

  • Create a new Vercel project and import your forked repository (you'll need a Vercel account).

  • Done πŸŽ‰. Vercel will give you a deployment URL, check it out!



Generic, non-personalized, fewer features.

URL: GET /api/v1/[slug]

Query params:

text: string.(png|jpg)
theme: "light" | "dark"
md: boolean # Enable/disable basic Markdown syntax
fontSize: string
images: string[]
widths: string[]
heights: string[]

All query params are optional, reasonable defaults are used when necessary.



Personalized, more features.

URL: GET /api/v2/[slug]

Query params:

text: markdown.(png|jpg)
target: "og" | "devto"
theme: "light" | "dark"
icons: string[]
colors: string[]
  • text supports basic Markdown syntax. Emojis are replaced with Twemoji variants.

  • target defines format suitable for distribution to a specific channel, currently supports Open Graph (og) and (devto) .

  • icons are loaded from Simple Icons. Use names appearing on Simple Icons' website as API inputs. Not found icons are ignored.

  • colors are valid CSS colors, or default to use Simple Icons' suggested colors, or invert to invert the default colors.

All query params are optional, reasonable defaults are used when necessary.


Project structure

The project uses Puppeteer to launch and capture screenshots from a headless Chrome. Responses are cached for 7 days to increase performance and reduce loads.

  • server/v1: parse API v1 requests and generate static HTML.

    • Change parser.ts to update query API.
    • Change template.ts to customize output images.
  • server/v2: parse API v2 requests and generate static HTML.

    • Change parser.ts to update query API.
    • Change template.ts to customize output images.
  • images/avatar.jpg: author's avatar used in v2. Replace with yours.

  • server/*.ts: utils to process HTML and capture screenshots.

  • pages/api/v1, pages/api/v2: Next.js API routes to receive requests (you probably won't need to change this).

  • fonts: Fonts are loaded locally in server/*/template.ts. Replace with your fonts (if necessary).

Recommended approach: copy api/v1 + server/v1 (or api/v2 + server/v2) to v3, then make changes arcordingly. It won't accidentially crash your code this way.



  • Node.js 12.

  • Yarn 1.22+.

  • Google Chrome.


Install dependencies:


Start development server:

yarn dev

See package.json for all pre-configured scripts.


Made by (@phuctm97).


Heavily inspired by Vercel's og-image.