Formats & Templates

OG Engine separates format (the canvas dimensions) from template (how content is laid out within those dimensions). This lets you mix and match: use the blog-hero template with the twitter format for a card that looks great in a Twitter feed.

Format Presets

Each format maps to a canonical set of dimensions used by social platforms:

Format	Dimensions	Aspect Ratio	Primary Use
`og`	1200 × 630 px	1.91:1	Open Graph (Facebook, Slack, Discord)
`twitter`	1200 × 675 px	16:9	Twitter / X summary_large_image card
`square`	1080 × 1080 px	1:1	Instagram, general purpose
`linkedin`	1200 × 627 px	1.91:1	LinkedIn posts
`story`	1080 × 1920 px	9:16	Instagram Stories, TikTok, Snapchat

How Format Affects Text Layout

Narrower or taller canvases affect how many lines your text wraps to, and therefore how many lines are shown before overflow kicks in:

Format	Max Title Lines	Max Desc Lines	Notes
`og`	3	4	Standard — most templates optimized for this
`twitter`	3	4	Nearly identical to `og`
`square`	4	5	More vertical space for text
`linkedin`	3	4	Slightly narrower than `og`
`story`	5	6	Tall format — text has more room

These limits apply at the default font sizes (48px title, 22px description). Increasing titleSize reduces the number of lines before overflow, and vice versa. Use the /validate endpoint to check without incurring a render.

Templates

Templates control the visual structure: background, typography placement, decorative elements, and how author and tag fields appear. New templates accept arbitrary extra fields through the variables object — see each template’s section in the Templates Gallery for the full list of supported keys.

`default`

The flagship template. Features:

Subtle grid background pattern
Gradient overlay from the style.gradient setting
Colored accent bar in the top-left corner driven by style.accent
Tag rendered as a pill badge below the title
Author line at the bottom
Supports left, center, and bottom layouts

Best for: blog posts, documentation, SaaS marketing pages — any general-purpose OG card.

`social-card`

A minimal template designed for Twitter and Instagram where content should be immediately legible in a feed:

Large centered title dominates the canvas
Description rendered smaller below
No grid or decorative elements — clean, bold, modern
Accent color used as a prominent horizontal divider

Best for: social shares, announcements, quote cards.

`blog-hero`

Designed to work with a background image. Features:

Background image fills the canvas with cover-crop behavior
Dark overlay (controlled by style.overlayOpacity) ensures text legibility
Text anchored to the bottom third of the canvas
Accent bar and tag pill placed above the title

Best for: articles with cover images, editorial content, newsletters with photography.

`email-banner`

A horizontal, CTA-oriented layout:

Title on the left, accent button/tag on the right
Compact vertical space — optimized for email clients
Gradient background with high-contrast text
Author field renders as a small “from” label

Best for: email headers, newsletters, transactional email banners.

`product-card`

An e-commerce template for product showcases. Accepts variables.price, variables.badge, and variables.brand. Supports a product image via images.product.

Best for: e-commerce product shares, catalogue cards, promotional social posts.

`event`

A conference and event template. Accepts variables.date, variables.location, variables.speaker, and variables.speakerRole.

Best for: conferences, meetups, webinars, workshop announcements.

`testimonial`

A quote-focused template for social proof. Accepts variables.name, variables.role, and variables.company. Supports a circular avatar via images.avatar.

Best for: customer testimonials, pull-quote social posts, review cards.

`github-repo`

A developer-tool template modelled after GitHub repository cards. Accepts variables.owner, variables.stars, and variables.language. Supports a repo avatar via images.avatar.

Best for: open source announcements, developer portfolio cards.

`news-article`

An editorial news card template. Accepts variables.source, variables.date, and variables.category. Designed to work with a background image.

Best for: news articles, editorial content, press release cards.

`pricing`

A SaaS pricing-card template. Accepts variables.plan, variables.price, variables.period, variables.features (newline-separated), and variables.cta.

Best for: pricing page social shares, upgrade prompts, plan comparison cards.

`profile-card`

A personal or professional profile template. Accepts variables.role, variables.company, and variables.bio. Supports an avatar via images.avatar.

Best for: speaker cards, author bios, team member spotlights.

`announcement`

A launch-oriented template for product releases and milestones. Accepts variables.subtitle and variables.cta. Supports a background image via images.background.

Best for: product launches, feature releases, milestone announcements.

Format + Template Compatibility

While all combinations are technically valid, some pairings produce noticeably better results:

Template	Best Formats	Notes
`default`	`og`, `linkedin`	Optimized for landscape 1.91:1 ratio
`social-card`	`twitter`, `square`	Looks great at 16:9 and 1:1
`blog-hero`	`og`, `twitter`	Background images shine in landscape
`email-banner`	`og`, `linkedin`	Horizontal layout requires wide canvas
`product-card`	`og`, `twitter`	Product image needs landscape space
`event`	`og`, `linkedin`	Metadata row benefits from wide canvas
`testimonial`	`square`, `twitter`	Quote text reads best at 1:1 and 16:9
`github-repo`	`og`, `twitter`	Metadata row designed for landscape
`news-article`	`og`, `twitter`	Background images shine in landscape
`pricing`	`og`, `square`	Feature list needs vertical space
`profile-card`	`twitter`, `square`	Avatar + bio layout suits 16:9 and 1:1
`announcement`	`og`, `twitter`, `story`	Works across all three aspect ratios

The story format works best with social-card, announcement, or default using a bottom layout, so the text sits comfortably in the lower half of the tall canvas.

Specifying Format and Template

Both fields are top-level in the request body:

{
  "format": "twitter",
  "template": "social-card",
  "title": "Announcing OG Engine 1.0",
  "description": "Generate images in ~22ms. No browser required."
}

If template is omitted, it defaults to "default".

Try Different Combinations

0.0ms|1300× vs Puppeteer

Template

Next Steps

Learn to Customize Styles — accent, font, gradient, and layout options
Browse the Templates Gallery with visual previews of each template
Use Text Validation to check whether text fits before rendering