This example demonstrates how to use @ogxjs/react in a browser environment to create a real-time, interactive OG image preview.

Overview

In this guide, we'll build a simple React application that:

Takes user input for a title and description.
Renders a preview component using JSX and Tailwind classes.
Uses renderToSVG from @ogxjs/react/svg to display the actual OG image in the browser.

The Preview Component

First, we create a standard React component using the tw prop for styling.

src/MyPreview.tsx

import { Box, Stack } from '@ogxjs/react';

export const MyPreview = ({ title, description }) => (
  <Stack tw="w-[1200px] h-[630px] bg-zinc-950 p-20 items-center justify-center">
    <Box tw="bg-zinc-900 border border-zinc-800 p-12 rounded-3xl shadow-2xl">
      <h1 tw="text-7xl font-bold text-white mb-4">{title}</h1>
      <p tw="text-3xl text-zinc-400">{description}</p>
    </Box>
  </Stack>
);

Live Rendering

In our main application, we use renderToSVG from the browser-safe module to generate the SVG preview.

src/App.tsx

import { useState, useEffect } from 'react';
import { renderToSVG } from '@ogxjs/react/svg';
import { MyPreview } from './MyPreview';

function App() {
  const [title, setTitle] = useState('My Awesome Project');
  const [description, setDescription] = useState('Built with OGX');
  const [svg, setSvg] = useState('');

  useEffect(() => {
    async function updatePreview() {
      // Render React component directly to SVG (browser compatible)
      const result = await renderToSVG(
        <MyPreview title={title} description={description} />
      );
      setSvg(result);
    }
    updatePreview();
  }, [title, description]);

  return (
    <div className="p-8">
      <input 
        value={title} 
        onChange={e => setTitle(e.target.value)}
        className="border p-2 mb-4 w-full"
        placeholder="Title"
      />
      <input 
        value={description} 
        onChange={e => setDescription(e.target.value)}
        className="border p-2 mb-8 w-full"
        placeholder="Description"
      />
      
      {/* Visual Preview */}
      <div dangerouslySetInnerHTML={{ __html: svg }} />
    </div>
  );
}

Why this is powerful

What you see is what you get: The preview in your browser is exactly the same as the generated PNG on your server.
Fast Feedback: Adjust layouts and styles in real-time without building or deploying.
Zero Heavyweight Dependencies: No headless browsers or complex setups needed for the preview.

Try it out

You can find the full source code for this example in the OGX repository.

Vanilla React Preview

Overview

The Preview Component

Live Rendering

Why this is powerful

Try it out

On this page