MetaKit Image API – Templates Guide
This guide documents every MetaKit template used by the website graphics tool. Start here for universal customization, then jump into the dedicated sub-pages for implementation details, dynamic props, and best practices.Universal customization
All templates share a common set of parameters and styling hooks, so you can standardize how previews look across content types.Core content
title: Primary headline or hero text.desc: Supporting copy or subtitle.brand: Display name in the footer or header.division: Eyebrow/badge text for categories, tags, or prices.image: Overrides the detected metadata image with a custom asset.
Styling & theme
mode:light(default) ordark.theme: Alias formodeor a specific theme preset.primaryColor: Main accent color for badges, buttons, and CTA highlights.secondaryColor: Supporting color used for borders or muted text.accentColor: High-contrast tone for CTAs or callouts.background: Background image URL.filter: Overlay intensity for background images (light,dark, or opacity0.1–1.0).font: Custom font family.
Template directory
| Template | Code | Best for | Reference |
|---|---|---|---|
| Clean | clean | Blogs, docs, general previews | View guide |
| Bold | bold | Feature reveals, big statements | View guide |
| Elegant | elegant | Luxury or formal events | View guide |
| Article | article | Editorial or news content | View guide |
| Promo | promo | Product drops, campaigns | View guide |
| Pricing | pricing | Plans, subscriptions | View guide |
| Wedding | wedding | Invitations, save-the-dates | View guide |
| Event | event | Webinars, conferences, launches | View guide |
| Highlight | highlight | Logo-first hero or partner badges | View guide |
| Docs | docs | API references, changelog, help center | View guide |
/templates playground to preview any layout instantly. When you’re ready to productionize, plug the same parameters into the URLs documented in each template page and update your og:image/twitter:image tags accordingly.