Skip to main content

​
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) or dark.
  • theme: Alias for mode or 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 opacity 0.1–1.0).
  • font: Custom font family.
These parameters can be combined with template-specific props covered in each sub-page.

​
Template directory

Use the /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.