Convert React Components to Image

// utils/renderToImage.ts
import { renderToStaticMarkup } from "react-dom/server";
import { type ReactElement } from "react";

export async function componentToImage(
  element: ReactElement,
  opts: { width?: number; height?: number; format?: string } = {}
): Promise<Buffer> {
  const html = renderToStaticMarkup(element);
  const res = await fetch("https://renderpix.dev/v1/render", {
    method: "POST",
    headers: {
      "X-API-Key": process.env.RENDERPIX_API_KEY!,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      html,
      width:  opts.width  ?? 1200,
      height: opts.height ?? 630,
      format: opts.format ?? "png",
    }),
  });
  return Buffer.from(await res.arrayBuffer());
}

// Usage
const buf = await componentToImage(
  <OgCard title="Hello World" domain="mysite.com" />
);
fs.writeFileSync("og.png", buf);