From Satori

import satori from "satori"; 
import { Resvg } from "@resvg/resvg-js"; 
import { fromJsx } from "@takumi-rs/helpers/jsx"; 
import { Renderer } from "@takumi-rs/core"; 

// You can use variable fonts with Takumi!
// Takumi comes with full axis Geist and Geist Mono by default, 
// if this is what you want, you can just remove fonts array.
const fonts = [
  {
    name: "Inter",
    data: await fetch("/fonts/Inter-Regular.ttf").then((res) => res.arrayBuffer()),
    style: "normal" as const,
    weight: 400
  }
];

const svg = await satori(<OgImage title="Satori" />, { 
  fonts, 
}); 
const buffer = new Resvg(svg).render().asPng(); 

const renderer = new Renderer({ 
  fonts, 
}); 

const node = await fromJsx(<OgImage title="Takumi" />); 
const png = await renderer.render(node, { 
  width: 1200, 
  height: 630, 
  format: "png", // "webp" is recommended as well.
}); 

function OgImage({ title }: { title: string }) {
  return (
    <div>
      <h1>Hello from {title}!</h1>
    </div>
  );
}