Presets Overview
Ready-to-use templates for common use cases
Presets are pre-designed layouts that handle common OG image patterns. They accept props and return a fully styled image.
Available Presets
| Preset | Description |
|---|---|
| Docs | Documentation sites with title, description, and branding |
| Blog | Blog posts with author, date, and category |
| Social | Gradient backgrounds with handle and branding |
| Minimal | Clean typography on solid backgrounds |
Previews
Documentation
Blog
Social
Minimal
Basic Usage
import { fontRegistry, ogx } from '@ogxjs/core';
await fontRegistry.registerInterFromUrl([400, 700]);
const png = await ogx({
preset: 'docs',
title: 'My Page',
// preset-specific options...
});Common Options
All presets support these options:
| Option | Type | Description |
|---|---|---|
colorScheme | 'dark' | 'light' | Color theme |
logo | string | Logo URL or base64 |
slots | object | Override header/footer |
Custom Slots
Override default elements:
import { ogx, span } from '@ogxjs/core';
const png = await ogx({
preset: 'docs',
title: 'Custom Header',
slots: {
header: span('text-sm text-zinc-500', 'Custom Header'),
},
});