OGX is organized as a monorepo with modular packages. Each package serves a specific purpose in the OG image generation pipeline.

Package Overview

@ogxjs/core

The rendering engine. Handles layout building, Tailwind parsing, presets, and image generation.

@ogxjs/next

Next.js adapter with Route Handler integration and edge runtime support.

@ogxjs/react

React JSX components for building OG images with familiar syntax.

Architecture

The packages form a layered architecture:

┌─────────────────────────────────────────────┐
│     @ogxjs/next   │    @ogxjs/react         │  ← Framework Adapters
├─────────────────────────────────────────────┤
│                 @ogxjs/core                 │  ← Engine
│  ┌─────────┐  ┌─────────┐  ┌─────────────┐  │
│  │ Builder │  │ Presets │  │  Tailwind   │  │
│  │   API   │  │         │  │   Parser    │  │
│  └─────────┘  └─────────┘  └─────────────┘  │
├─────────────────────────────────────────────┤
│           Satori (SVG) + Resvg (PNG)        │  ← Renderers
└─────────────────────────────────────────────┘

@ogxjs/core: The foundation. Everything you need to create OG images.
@ogxjs/next: Zero-config integration for Next.js projects.
@ogxjs/react: JSX-based component system for React developers.

Installation

Install only the packages you need:

# Core only (for custom setups)
npm install @ogxjs/core

# Next.js projects
npm install @ogxjs/next

# React projects (includes core)
npm install @ogxjs/react

Packages