The basic template is a production-ready, highly customizable template that supports three different layouts and full RTL support.
Import
import template from "@ogify/templates/basic";
import type { TemplateParams } from "@ogify/templates/basic";
Parameters
Optional subtitle or description text
Your brand or company name
URL to your brand logo image
Call-to-action text (e.g., “Read More”, “Learn More”)
Additional metadata items (e.g., date, author, reading time)
layout
'aligned' | 'centered' | 'split'
default:"aligned"
Layout style for the template
Primary color for gradients and background
Secondary color for gradients
pattern
string
default:"https://assets.ogify.dev/patterns/cubes.png"
Background pattern image URL
Layouts
Left-aligned layout (or right-aligned for RTL) with brand logo at the top and metadata at the bottom.const buffer = await renderer.renderToImage('basic', {
title: 'Getting Started with OGify',
subtitle: 'Learn how to generate beautiful Open Graph images',
brandName: 'OGify',
brandLogo: 'https://example.com/logo.png',
layout: 'aligned',
extras: ['5 min read', 'Jan 12, 2026'],
});
Center-aligned layout with all content centered on the canvas.const buffer = await renderer.renderToImage('basic', {
title: 'Welcome to Our Platform',
subtitle: 'Build amazing things together',
brandName: 'Platform',
layout: 'centered',
cta: 'Get Started',
});
Two-column layout with brand info on one side and content on the other.const buffer = await renderer.renderToImage('basic', {
title: 'Advanced Features',
subtitle: 'Discover what makes us different',
brandName: 'Product',
brandLogo: 'https://example.com/logo.png',
layout: 'split',
extras: ['Feature 1', 'Feature 2', 'Feature 3'],
});
Examples
import { createRenderer } from "@ogify/core";
import template from "@ogify/templates/basic";
import type { TemplateParams } from "@ogify/templates/basic";
const renderer = createRenderer<{ basic: TemplateParams }>({
templates: { basic: template },
});
const buffer = await renderer.renderToImage("basic", {
title: "Hello World",
subtitle: "My first OG image",
layout: "centered",
});
Fonts
The basic template uses JetBrains Mono font in two weights:
Features
Fully supports right-to-left languages. Pass isRTL: true in the options to enable RTL layout.
Control primary color, secondary color, and text color to match your brand.
Choose from aligned, centered, or split layouts depending on your content
needs.
Add visual interest with customizable background patterns.
Include a prominent CTA button with automatic arrow icons that flip for RTL.
Tips
Use the extras array to display metadata like reading time, date, category,
or author information.
The template automatically adjusts text size based on whether a subtitle is
present - titles are larger when there’s no subtitle.
Background gradients are created using radial gradients from the corners,
creating a modern, dynamic look.
