migo

What is this?

This is a free microservice for generating dynamic OG images (also called Twitter Cards or OpenGraph images) on the Edge, with Deno Deploy. All images are first rendered as SVG vectors, then rasterized to PNG, and ultimately cached as immutable assets. Totally customizable, with built-in support for multiple font faces, thousands of icons, and millions of colors, the possibilities are virtually endless.

Read more and check out the source code at the GitHub Repository. Found a bug? Please create an issue so it can be fixed. And if you find this project to be useful, please give it a star on GitHub. Thanks!

— Nicholas Berlette

Schema

migo.deno.dev/:title.(png|svg)

migo.deno.dev/:title/:subtitle.(png|svg)

migo.deno.dev/:params/:title/:subtitle.(png|svg)

Parameters and Defaults

// base props of the image
width = 1280, 
height = 640, 
viewBox = "0 0 1280 640", 
pxRatio = "1.5", // set to 1 for low-res
bgColor = "white", 
borderRadius = 0, // rounded image corners
// icon
icon = "noto:t-rex", // set to false to disable icon
iconUrl = "https://icns.ml/{icon}.svg", 
iconW = 240, 
iconH = 240, // +iconW
iconX = 520, // ((width - iconW) / 2)
iconY = 60, // (iconH / 4)
iconColor = "black", // fill color
iconStroke = "none", // stroke color
iconStrokeWidth = 0, // stroke width
// title (first line of text)
titleX = 640, // (width / 2)
titleY = 450, // (iconH + iconY + (titleFontSize * 2.5))
titleFontSize = 64, 
titleFontFamily = "sans-serif", // "Inter"
titleFontWeight = "bold", 
titleColor = "#112233", // text color
titleStroke = "none", // stroke color
titleStrokeWidth = 0, // stroke width
titleTextAnchor = "middle", // text-anchor
// subtitle (second line of text)
subtitleX = 640, // (width / 2)
subtitleY = 530, // (titleY + (subtitleFontSize * 2.5))
subtitleFontSize = 32, 
subtitleFontFamily = "monospace", // "JetBrains Mono"
subtitleFontWeight = "normal", 
subtitleColor = "#334455", // text color
subtitleStroke = "none", // stroke color
subtitleStrokeWidth = 0, // stroke width
subtitleTextAnchor = "middle" // text-anchor