API Docs — OG Graph

🖼️

OG Image Templates

Returns PNG images sized 1200×630. Cache: max-age=3600.

GET

/api/og/general

Parameter	Type	Default	Description
`siteName`	string	—	Brand / website name
`title`	string	—	Page title — replaces siteName in hero if provided
`description`	string	—	Subtitle text (max 2 lines)
`accentColor`	string	—	Used for title underline / logo border ring
`theme`	string	—	Color theme: 'dark' \| 'light' \| 'auto'
`target`	string	—	Platform preset — sets output dimensions
`fontFamily`	string	—	Typography preset
`bgTone`	string	—	Background tone preset
`bgCustomColor`	string	—	Custom background base color
`bgGradientFrom`	string	—	Gradient start color override (for gradient base)
`bgGradientTo`	string	—	Gradient end color override (for gradient base)
`bgStyle`	string	—	Composable background tokens e.g. gradient+grid+noise
`logo`	string	—
`logoWidth`	string	—	Logo width in px
`logoHeight`	string	—	Logo height in px (auto if omitted)

Example URL

https://placard.mfaouzi.com/api/og/general?siteName=OG+Graph&title=Open+Graph+Generator&description=Self-hostable+social+card+generator&theme=dark&accentColor=%236366f1&fontFamily=geist&bgStyle=gradient%2Bgrid

GET

/api/og/gradient

Open in Builder Live example

Parameter	Type	Default	Description
`siteName`	string	—	Lower subheading
`title`	string	—	Main heading with gradient applied
`description`	string	—	Paragraph below heading
`gradientFrom`	string	—	CSS gradient start color (hex)
`gradientTo`	string	—	CSS gradient end color (hex)
`gradientAngle`	string	—	Gradient direction in degrees
`theme`	string	—	Color theme: 'dark' \| 'light' \| 'auto'
`target`	string	—	Platform preset — sets output dimensions
`fontFamily`	string	—	Typography preset
`bgTone`	string	—	Background tone preset
`bgCustomColor`	string	—	Custom background base color
`bgGradientFrom`	string	—	Gradient start color override (for gradient base)
`bgGradientTo`	string	—	Gradient end color override (for gradient base)
`bgStyle`	string	—	Composable background tokens e.g. gradient+grid+noise
`logo`	string	—
`logoWidth`	string	—	Logo width in px
`logoHeight`	string	—	Logo height in px (auto if omitted)

Example URL

https://placard.mfaouzi.com/api/og/gradient?title=Beautiful+Images&siteName=og-graph&gradientFrom=%2300e887&gradientTo=%2300e0f3&theme=dark&fontFamily=space&bgStyle=aurora%2Bdots

GET

/api/og/blog

Open in Builder Live example

Parameter	Type	Default	Description
`title`	string	—	Post title (max 3 lines)
`banner`	string	—
`tags`	string	—	Comma-separated category tags (up to 4)
`authorName`	string	—	Author display name
`authorPhoto`	string	—
`authorHandle`	string	—	Social handle e.g. @johndoe
`readingTime`	string	—	e.g. "5 min read"
`publishDate`	string	—	ISO 8601 date e.g. 2026-04-28
`dateLocale`	string	—	BCP 47 locale for date formatting e.g. fr-FR (defaults to en-US)
`siteDomain`	string	—	Breadcrumb domain shown above date
`accentColor`	string	—	Accent bar color
`theme`	string	—	Color theme: 'dark' \| 'light' \| 'auto'
`target`	string	—	Platform preset — sets output dimensions
`fontFamily`	string	—	Typography preset
`bgTone`	string	—	Background tone preset
`bgCustomColor`	string	—	Custom background base color
`bgGradientFrom`	string	—	Gradient start color override (for gradient base)
`bgGradientTo`	string	—	Gradient end color override (for gradient base)
`bgStyle`	string	—	Composable background tokens e.g. gradient+grid+noise
`logo`	string	—
`logoWidth`	string	—	Logo width in px
`logoHeight`	string	—	Logo height in px (auto if omitted)

Example URL

https://placard.mfaouzi.com/api/og/blog?title=How+to+Build+a+Blog&tags=Next.js%2CTypeScript&authorName=Jane+Doe&siteDomain=myblog.com&theme=dark&fontFamily=inter&bgStyle=mesh%2Bnoise

GET

/api/og/minimal

Open in Builder Live example

Parameter	Type	Default	Description
`title`	string	—	Large centered heading (max 3 lines)
`description`	string	—	Subtext below title (max 2 lines)
`eyebrow`	string	—	ALL-CAPS small label above title e.g. TUTORIAL
`bgColor`	string	—	Override background color (hex)
`textColor`	string	—	Override primary text color (hex)
`accentColor`	string	—	Color for eyebrow and bottom border accent
`theme`	string	—	Color theme: 'dark' \| 'light' \| 'auto'
`target`	string	—	Platform preset — sets output dimensions
`fontFamily`	string	—	Typography preset
`bgTone`	string	—	Background tone preset
`bgCustomColor`	string	—	Custom background base color
`bgGradientFrom`	string	—	Gradient start color override (for gradient base)
`bgGradientTo`	string	—	Gradient end color override (for gradient base)
`bgStyle`	string	—	Composable background tokens e.g. gradient+grid+noise
`logo`	string	—
`logoWidth`	string	—	Logo width in px
`logoHeight`	string	—	Logo height in px (auto if omitted)

Example URL

https://placard.mfaouzi.com/api/og/minimal?title=Clean+Design&eyebrow=TUTORIAL&theme=dark&accentColor=%236366f1&fontFamily=serif&bgStyle=solid%2Bvignette

GET

/api/og/article

Open in Builder Live example

Parameter	Type	Default	Description
`title`	string	—	Headline (max 3 lines)
`excerpt`	string	—	1-2 sentence teaser (max 2 lines)
`authorName`	string	—	Author name
`authorPhoto`	string	—
`publicationName`	string	—	Newsletter / publication brand name
`publicationLogo`	string	—
`readingTime`	string	—	e.g. "8 min read"
`publishDate`	string	—	ISO 8601 date e.g. 2026-04-28
`dateLocale`	string	—	BCP 47 locale for date formatting e.g. fr-FR (defaults to en-US)
`accentColor`	string	—	Left edge accent bar + publication name color
`theme`	string	—	Color theme: 'dark' \| 'light' \| 'auto'
`target`	string	—	Platform preset — sets output dimensions
`fontFamily`	string	—	Typography preset
`bgTone`	string	—	Background tone preset
`bgCustomColor`	string	—	Custom background base color
`bgGradientFrom`	string	—	Gradient start color override (for gradient base)
`bgGradientTo`	string	—	Gradient end color override (for gradient base)
`bgStyle`	string	—	Composable background tokens e.g. gradient+grid+noise
`logo`	string	—
`logoWidth`	string	—	Logo width in px
`logoHeight`	string	—	Logo height in px (auto if omitted)

Example URL

https://placard.mfaouzi.com/api/og/article?title=The+Future+of+Web+Dev&excerpt=A+deep+dive+into+modern+tooling&authorName=Jane+Doe&publicationName=Tech+Weekly&theme=dark&fontFamily=inter&bgStyle=gradient%2Bvignette

GET

/api/og/product

Open in Builder Live example

Parameter	Type	Default	Description
`productName`	string	—	Large product name
`tagline`	string	—	One-liner value proposition
`feature1`	string	—	First feature bullet
`feature2`	string	—	Second feature bullet
`feature3`	string	—	Third feature bullet
`badge`	string	—	Small pill badge e.g. "v2 Live"
`cta`	string	—	CTA text e.g. "Get Started Free"
`screenshot`	string	—
`accentColor`	string	—	Badge, CTA pill, feature dots, glow color
`theme`	string	—	Color theme: 'dark' \| 'light' \| 'auto'
`target`	string	—	Platform preset — sets output dimensions
`fontFamily`	string	—	Typography preset
`bgTone`	string	—	Background tone preset
`bgCustomColor`	string	—	Custom background base color
`bgGradientFrom`	string	—	Gradient start color override (for gradient base)
`bgGradientTo`	string	—	Gradient end color override (for gradient base)
`bgStyle`	string	—	Composable background tokens e.g. gradient+grid+noise
`logo`	string	—
`logoWidth`	string	—	Logo width in px
`logoHeight`	string	—	Logo height in px (auto if omitted)

Example URL

https://placard.mfaouzi.com/api/og/product?productName=My+SaaS&tagline=Build+faster&feature1=Open+source&feature2=Edge+ready&cta=Get+Started&theme=dark&accentColor=%238b5cf6&fontFamily=space&bgStyle=aurora%2Bgrid

GET

/api/og/portfolio

Open in Builder Live example

Parameter	Type	Default	Description
`name`	string	—	Full name — largest text element
`role`	string	—	Job title e.g. "Full-Stack Developer"
`bio`	string	—	One-liner personal tagline
`avatar`	string	—
`skills`	string	—	Comma-separated tech tags (up to 6)
`githubHandle`	string	—	GitHub username
`twitterHandle`	string	—	Twitter/X handle
`websiteUrl`	string	—	Personal site URL
`location`	string	—	City / country
`available`	string	—	Shows green Open to work badge when true
`accentColor`	string	—	Skill chips, social handles, avatar ring
`theme`	string	—	Color theme: 'dark' \| 'light' \| 'auto'
`target`	string	—	Platform preset — sets output dimensions
`fontFamily`	string	—	Typography preset
`bgTone`	string	—	Background tone preset
`bgCustomColor`	string	—	Custom background base color
`bgGradientFrom`	string	—	Gradient start color override (for gradient base)
`bgGradientTo`	string	—	Gradient end color override (for gradient base)
`bgStyle`	string	—	Composable background tokens e.g. gradient+grid+noise
`logo`	string	—
`logoWidth`	string	—	Logo width in px
`logoHeight`	string	—	Logo height in px (auto if omitted)

Example URL

https://placard.mfaouzi.com/api/og/portfolio?name=Jane+Doe&role=Full-Stack+Developer&skills=React%2CTypeScript%2CGo&available=true&theme=dark&accentColor=%233b82f6&fontFamily=space&bgStyle=aurora%2Bgrid%2Bnoise

GET

/api/og/quote

Open in Builder Live example

Parameter	Type	Default	Description
`quote`	string	—	Primary quote text
`author`	string	—	Quote author
`kicker`	string	—	Small category label
`accentColor`	string	—	Accent color for quote bar and author
`theme`	string	—	Color theme: 'dark' \| 'light' \| 'auto'
`target`	string	—	Platform preset — sets output dimensions
`fontFamily`	string	—	Typography preset
`bgTone`	string	—	Background tone preset
`bgCustomColor`	string	—	Custom background base color
`bgGradientFrom`	string	—	Gradient start color override (for gradient base)
`bgGradientTo`	string	—	Gradient end color override (for gradient base)
`bgStyle`	string	—	Composable background tokens e.g. gradient+grid+noise
`logo`	string	—
`logoWidth`	string	—	Logo width in px
`logoHeight`	string	—	Logo height in px (auto if omitted)

Example URL

https://placard.mfaouzi.com/api/og/quote?quote=Build+fast.+Ship+often.&author=Mohamed+Faouzi&kicker=Engineering&theme=dark&accentColor=%2314b8a6&fontFamily=serif&bgStyle=mesh%2Bvignette

GET

/api/og/changelog

Open in Builder Live example

Parameter	Type	Default	Description
`productName`	string	—	Product name
`version`	string	—	Release version
`headline`	string	—	Release headline
`change1`	string	—	First changelog item
`change2`	string	—	Second changelog item
`change3`	string	—	Third changelog item
`accentColor`	string	—	Accent color
`theme`	string	—	Color theme: 'dark' \| 'light' \| 'auto'
`target`	string	—	Platform preset — sets output dimensions
`fontFamily`	string	—	Typography preset
`bgTone`	string	—	Background tone preset
`bgCustomColor`	string	—	Custom background base color
`bgGradientFrom`	string	—	Gradient start color override (for gradient base)
`bgGradientTo`	string	—	Gradient end color override (for gradient base)
`bgStyle`	string	—	Composable background tokens e.g. gradient+grid+noise
`logo`	string	—
`logoWidth`	string	—	Logo width in px
`logoHeight`	string	—	Logo height in px (auto if omitted)

Example URL

https://placard.mfaouzi.com/api/og/changelog?productName=OG+Graph&version=v2.1.0&headline=Performance+and+UX+upgrade&change1=New+style+system&change2=Font+controls+for+all+templates&change3=New+endpoint+variants&theme=dark&accentColor=%2338bdf8&fontFamily=inter&bgStyle=gradient%2Bgrid

GET

/api/og/event

Open in Builder Live example

Parameter	Type	Default	Description
`eventName`	string	—	Conference or event name
`tagline`	string	—	Short event tagline or theme
`eventDate`	string	—	ISO 8601 date e.g. 2026-09-15
`dateLocale`	string	—	BCP 47 locale for date formatting e.g. fr-FR
`location`	string	—	City and country or venue name
`host`	string	—	Organizer or host name
`accentColor`	string	—	Accent color for date, dividers
`theme`	string	—	Color theme: 'dark' \| 'light' \| 'auto'
`target`	string	—	Platform preset — sets output dimensions
`fontFamily`	string	—	Typography preset
`bgTone`	string	—	Background tone preset
`bgCustomColor`	string	—	Custom background base color
`bgGradientFrom`	string	—	Gradient start color override (for gradient base)
`bgGradientTo`	string	—	Gradient end color override (for gradient base)
`bgStyle`	string	—	Composable background tokens e.g. gradient+grid+noise
`logo`	string	—
`logoWidth`	string	—	Logo width in px
`logoHeight`	string	—	Logo height in px (auto if omitted)

Example URL

https://placard.mfaouzi.com/api/og/event?eventName=DesignConf+2026&tagline=The+future+of+design&location=Paris%2C+France&host=Acme+Events&theme=dark&accentColor=%23f97316&fontFamily=space&bgStyle=gradient%2Bgrid

GET

/api/og/launch

Open in Builder Live example

Parameter	Type	Default	Description
`productName`	string	—	Product or project name
`punchline`	string	—	One-line bold value proposition
`launchDate`	string	—	ISO 8601 date or freeform text e.g. "Coming soon"
`highlight1`	string	—	First key highlight
`highlight2`	string	—	Second key highlight
`highlight3`	string	—	Third key highlight
`badge`	string	—	Pill badge text e.g. "Now live"
`accentColor`	string	—	Accent color for highlights and badge
`theme`	string	—	Color theme: 'dark' \| 'light' \| 'auto'
`target`	string	—	Platform preset — sets output dimensions
`fontFamily`	string	—	Typography preset
`bgTone`	string	—	Background tone preset
`bgCustomColor`	string	—	Custom background base color
`bgGradientFrom`	string	—	Gradient start color override (for gradient base)
`bgGradientTo`	string	—	Gradient end color override (for gradient base)
`bgStyle`	string	—	Composable background tokens e.g. gradient+grid+noise
`logo`	string	—
`logoWidth`	string	—	Logo width in px
`logoHeight`	string	—	Logo height in px (auto if omitted)

Example URL

https://placard.mfaouzi.com/api/og/launch?productName=SuperApp&punchline=The+tool+you+wished+existed&badge=Now+live&highlight1=10%C3%97+faster&highlight2=Open+source&highlight3=Zero+config&theme=dark&accentColor=%23ec4899&fontFamily=geist&bgStyle=aurora%2Bdots

🏷️

SVG Badges

Returns image/svg+xml. Embed with <img> or Markdown. Cache: max-age=3600.

GET

/api/badge/label

Live example

Premium two-segment label/value badge.

Parameter	Type	Default	Description
`label`	string	—	Left-side label text
`message`	string	—	Right-side message text
`color`	string	—
`labelColor`	string	—
`style`	string	—	Badge style: 'flat' \| 'pill'
`theme`	string	—	Color theme: 'dark' \| 'light'

Example URL

https://placard.mfaouzi.com/api/badge/label?label=version&message=2.1.0&color=%236366f1&style=flat

GET

/api/badge/stat

Live example

Premium single-metric display card with optional icon.

Parameter	Type	Default	Description
`label`	string	—	Metric label
`value`	string	—	Metric value (raw string — supports abbreviations like 1.2k)
`unit`	string	—	Unit suffix e.g. %, ms, MB
`color`	string	—
`icon`	string	—	Optional icon slug
`theme`	string	—	Color theme: 'dark' \| 'light'

Example URL

https://placard.mfaouzi.com/api/badge/stat?label=Stars&value=4.2k&icon=star&color=%23f59e0b

GET

/api/badge/status

Live example

Glass-style service health indicator with semantic colors.

Parameter	Type	Default	Description
`label`	string	—	Service or component name
`status`	string	—	Current operational status
`color`	string	—	Override status color (hex) — defaults to semantic color
`theme`	string	—	Color theme: 'dark' \| 'light'

Example URL

https://placard.mfaouzi.com/api/badge/status?label=API&status=online

GET

/api/badge/progress

Live example

Premium progress bar for coverage, funding goals, completion.

Parameter	Type	Default	Description
`label`	string	—	Label above the bar
`value`	string	—	Progress value 0–100
`color`	string	—
`width`	string	—	Total badge width in px
`theme`	string	—	Color theme: 'dark' \| 'light'

Example URL

https://placard.mfaouzi.com/api/badge/progress?label=Coverage&value=87&color=%2322c55e

GET

/api/badge/score

Live example

Premium circular score ring — Lighthouse, ratings.

Parameter	Type	Default	Description
`label`	string	—	Score category label
`value`	string	—	Achieved score
`max`	string	—	Maximum possible score
`color`	string	—
`theme`	string	—	Color theme: 'dark' \| 'light'

Example URL

https://placard.mfaouzi.com/api/badge/score?label=Performance&value=95&color=%236366f1

GET

/api/badge/socials

Live example

Social proof pill with platform icon and glass body.

Parameter	Type	Default	Description
`platform`	string	—	Social platform
`handle`	string	—	Username or handle (without @)
`followers`	string	—	Follower / subscriber count (raw string e.g. 4.2k)
`color`	string	—
`theme`	string	—	Color theme: 'dark' \| 'light'

Example URL

https://placard.mfaouzi.com/api/badge/socials?platform=github&handle=acme&followers=4.2k&color=%236366f1

GET

/api/badge/tech-stack

Live example

Premium tech tag row for README or portfolio.

Parameter	Type	Default	Description
`stack`	string	—	Comma-separated list of tech names (up to 8)
`color`	string	—
`style`	string	—	Layout: 'tags' (pill chips) \| 'row' (compact)
`theme`	string	—	Color theme: 'dark' \| 'light'

Example URL

https://placard.mfaouzi.com/api/badge/tech-stack?stack=React%2CTypeScript%2CGo&color=%236366f1&style=tags

GET

/api/badge/availability

Live example

Premium "Open to work" / availability status banner.

Parameter	Type	Default	Description
`label`	string	—	Name or role label
`available`	string	—	'true' shows green open-to-work state
`hireText`	string	—	Custom CTA text e.g. 'Available for freelance'
`color`	string	—
`theme`	string	—	Color theme: 'dark' \| 'light'

Example URL

https://placard.mfaouzi.com/api/badge/availability?label=Jane+Doe&available=true&hireText=Open+to+work&color=%2322c55e

🔍

SEO Assets

Returns PNG images sized to platform spec. Cache: max-age=86400.

GET

/api/seo/favicon

Live example

32×32 PNG for <link rel="icon">.

Parameter	Type	Default	Description
`initial`	string	—	1–2 letter monogram shown when no logo is provided
`logo`	string	—	Absolute URL of a logo/icon image — renders instead of monogram
`color`	string	—	Background color (hex)
`accentColor`	string	—	Foreground / ring accent color (hex)
`shape`	string	—	Icon shape: 'circle' \| 'square' \| 'rounded'
`theme`	string	—	Color theme: 'dark' \| 'light'

Example URL

https://placard.mfaouzi.com/api/seo/favicon?initial=OG&color=%230f0f0f&accentColor=%236366f1&shape=rounded

GET

/api/seo/apple-touch-icon

Live example

180×180 PNG for <link rel="apple-touch-icon">.

Parameter	Type	Default	Description
`initial`	string	—	1–2 letter monogram shown when no logo is provided
`logo`	string	—	Absolute URL of a logo/icon image — renders instead of monogram
`color`	string	—	Background color (hex)
`accentColor`	string	—	Foreground / ring accent color (hex)
`shape`	string	—	Icon shape: 'circle' \| 'square' \| 'rounded'
`theme`	string	—	Color theme: 'dark' \| 'light'

Example URL

https://placard.mfaouzi.com/api/seo/apple-touch-icon?initial=OG&color=%230f0f0f&accentColor=%236366f1&shape=rounded

GET

/api/seo/manifest-icon

Live example

192 or 512 px PNG for PWA manifest.json.

Parameter	Type	Default	Description
`initial`	string	—	1–2 letter monogram shown when no logo is provided
`logo`	string	—	Absolute URL of a logo/icon image — renders instead of monogram
`color`	string	—	Background color (hex)
`accentColor`	string	—	Foreground / ring accent color (hex)
`shape`	string	—	Icon shape: 'circle' \| 'square' \| 'rounded'
`theme`	string	—	Color theme: 'dark' \| 'light'
`size`	string	—	Icon size: 192 or 512 px

Example URL

https://placard.mfaouzi.com/api/seo/manifest-icon?initial=OG&color=%230f0f0f&accentColor=%236366f1&shape=rounded&size=512

GET

/api/seo/twitter-card

Live example

800×418 PNG Twitter summary card.

Parameter	Type	Default	Description
`title`	string	—	Card headline
`description`	string	—	Short description (1–2 lines)
`siteName`	string	—	Site or brand name
`logo`	string	—	Logo image URL
`accentColor`	string	—	Accent color (hex)
`theme`	string	—	Color theme: 'dark' \| 'light'
`bgStyle`	string	—	Background style tokens e.g. 'gradient+grid'

Example URL

https://placard.mfaouzi.com/api/seo/twitter-card?title=Open+Graph+Generator&siteName=og-graph&accentColor=%236366f1&bgStyle=gradient%2Bgrid

Response Codes

200Image (PNG or SVG)
400JSON with Zod validation errors
500JSON with error message