Skip to content
📷 The tool that generates your social image based on your markdown content.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


We got inspired by the social image from so we decided to create the own one for our blog However, you can use it to generate images for your site as well.

npm npm


npm i -g social-image-gen
# or
yarn global add social-image-gen


social-image-gen [args]

Available arguments

Argument Required Default Description
--path optional The path to the markdown file. Eg: --path=./posts/post-slug/
--output optional The path that stores the generated image. Eg: --output=./public/post-slug
--width optional 800 The image width.
--height optional 400 The image height.
--name optional "thumbnail" The name of image.
--type optional png The type of image. It's must be 'png' or 'jpeg'
--title optional "untitled" The title in the image. Eg: --title="Hello World"
--date optional The date in the image. Eg: --date="20 Mar 2019"
--author optional "unauthored" The author in the image. Eg: --author=""
--template optional templates/default.html The mockup template is used to generate image. You can check ./templates/default.html to see how to create a template.


  1. Generate a 1200x630px social image from posts/hello-world/

Suppose that has the front matter looks like this:

title: Lấy dữ liệu web với Node.js và Puppeteer
author: Thien Nguyen
date: "2019-03-04T10:33:00+07:00"
social-image-gen --path=./posts/hello-world/ --output=./public/hello-world/ --width=1200 --height=630


  1. Generate a 800x400px social image without markdown file.
social-image-gen --output=./public/hello-world/ --title="Hello World" --date="20 Mar, 2019" --author=""


You can’t perform that action at this time.