Quickstart - OGify | Generate beautiful Open Graph images in minutes

Installation

Choose your package manager and run the following command:

npm install @ogify/core @ogify/templates

pnpm add @ogify/core @ogify/templates

yarn add @ogify/core @ogify/templates

Quick Start

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

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';

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/white-logo.svg',
  }
});

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',
  extras: ['#zero-config', '#production-ready'],
});

Saving or Returning the Image

You can save the image to a file or return it as a response.

Saving to a File

import { writeFile } from 'node:fs/promises';

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

Returning as a Response

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

​Installation

​Quick Start

Installation

Quick Start