React Adapter

The @ogxjs/react adapter allows you to build OG images using familiar JSX syntax. It's designed for both server-side rendering and client-side previews.

Installation

pnpm add @ogxjs/react @ogxjs/core

Basic Usage

The primary way to use @ogxjs/react is through the toOGX function, which converts React elements into OGX elements that can be rendered to PNG or SVG.

import { toOGX } from '@ogxjs/react';
import { render } from '@ogxjs/react/png';

const MyOGImage = () => (
  <div tw="flex flex-col items-center justify-center bg-zinc-950 w-full h-full text-white">
    <h1 tw="text-6xl font-bold">Hello React</h1>
    <p tw="text-2xl text-zinc-400">Built with OGX</p>
  </div>
);

// png is a Buffer (Node.js/Server only)
const png = await render(<MyOGImage />);

The tw Prop

OGX augments React's types to include a tw prop on standard HTML elements. This allows you to use Tailwind CSS utility classes directly.

<div tw="bg-blue-500 p-8 rounded-xl shadow-2xl">
  <span tw="text-white font-medium">Coming Soon</span>
</div>

[!NOTE] Make sure to import @ogxjs/react or include its types in your tsconfig.json to get full autocomplete for the tw prop.

Browser Support (Live Preview)

One of the best features of @ogxjs/react is its full browser compatibility. Unlike most OG image generators that require Node.js, you can create live previews directly in the browser using renderToSVG from the browser-safe module.

This is perfect for:

• Interactive playgrounds - Let users preview OG images in real-time
• Visual editors - Build WYSIWYG tools for OG image creation
• Design systems - Preview OG images alongside your UI components

import { renderToSVG } from '@ogxjs/react/svg';

const svg = await renderToSVG(<MyOGImage />);
// Use svg directly in dangerouslySetInnerHTML or as an img src

[!TIP] The /svg module has zero Node.js dependencies, making it safe to use in any browser environment.

Next Steps