ClipBI

What is this?

This is a microservice for generating dynamic OG images (also called Twitter Cards or OpenGraph images) on the Edge. 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 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 Have a nice day!. Thanks!

— ClipBI

Schema

og-image.api.clipbi.com/:title.(png|svg)

og-image.api.clipbi.com/:title/:subtitle.(png|svg)

og-image.api.clipbi.com/: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