Skip to main content

​
Installation

Choose your package manager and run the following command: 
npm install @ogify/core @ogify/templates

​
Quick Start

This guide will walk you through generating your first Open Graph image using OGify.
1

Import a Template

OGify comes with a set of ready-to-use templates. For this guide, we’ll use the basic template. Browse all available templates at the Template Gallery.
import template from '@ogify/templates/basic';
import type { TemplateParams } from '@ogify/templates/basic';
2

Create a Renderer

The renderer is responsible for orchestrating the generation process. Create it by passing your templates to createRenderer.
import { createRenderer } from '@ogify/core';

const renderer = createRenderer<{ basic: TemplateParams }>({
  templates: { basic: template },
  // Optional: Shared parameters across all templates
  sharedParams: {
    brandName: 'My Brand',
    brandLogo: 'https://ogify.dev/logo.svg',
  }
});
3

Generate an Image

Now you can generate an image by calling renderToImage. This returns a PNG buffer that you can serve in your response or save to disk.
const imageBuffer = await renderer.renderToImage('basic', {
  title: 'Hello World',
  subtitle: 'My first dynamically generated OG image',
  layout: 'aligned',
  cta: 'Read More',
  primaryColor: '#000000',
});
4

Saving or Returning the Image

You can save the image to a file or return it as a response.
import { writeFile } from 'node:fs/promises';

await writeFile('output.png', imageBuffer);

return new Response(imageBuffer, {
  headers: {
    'Content-Type': 'image/png',
  },
});