satori-og

Getting Started

• Introduction
• Use Case
• Installation
• Usage
  • Init
  • Error handling

Introduction

The satori-og is a utility library for generating custom Open Graph images using Satori. It’s perfect for developers wanting to enhance their websites or blogs with automated images.

With satori-og, you can create a "client" with default settings (e.g., dimensions, fonts, renders) and generate images easily by calling the generateImage function. The "client" requires a render parameter, allowing you to build dynamic images with ReactNode/JSX. You can define multiple renders and select the appropriate one when generating images.

Use the Satori Playground to experiment with designs and integrate them into your project. Check out examples in example/ts-node.

Use case

The satori-og library is designed to integrate with SSG (Static Site Generation) frameworks like astro.build. It lets you pre-define renders for different page types (e.g., default, blog, project), offering more flexibility than standard Open Graph generators. You can customize images by choosing a render and passing any parameters to generateImage.

Installation

• Npm

npm install satori-og

• Yarn

yarn add satori-og

Usage

• See examples

Init client

import { createSatoriOg } from '<path>';
// Use 'createSatoriOgInstance' to avoid creating a new SatoriOg on every call
const client = createSatoriOg({ ...options });
console.log('SatoriOG: ', client);

Error handling

Then/Catch

const path = await generateImage(
  'default', // render name, defined in options
  option, // render params/options
  'default-render', // output file name (without extension)
)
  .then((data) => data)
  .catch((err) => console.error(err));

if (result) {
  console.log(`Image (${option.render}) generated at '${path}'`);
}

Try/Catch

try {
  const path = await generateImage(
    'default', // render name, defined in options
    render.options, // render params/options
    'default-render', // output file name (without extension)
  );

  console.log(`Image (${option.render}) generated at '${path}'`);
} catch (err) {
  console.error(err);
}

Repository template

This repository uses typescript-library-boilerplate as template.