Request to image
The OG registry pairs each template with its input schema and render function. The route validates query parameters, selects a supported locale and renders the configured image dimensions. Home, default, post and profile templates cover public pages.
Node development uses the native Takumi renderer. Workerd uses the WASM renderer and bundled font data. The existing renderer adapter contains historical runtime-specific imports; documentation adds no new dynamic imports.
React Compiler boundary
OG components are called by the image renderer outside React's normal dispatcher. They use the "use no memo" directive so React Compiler does not insert hook-dependent memoization.
function ImageHeading({ title }: { title: string }) {
"use no memo";
return <div style={{ fontSize: 64 }}>{title}</div>;
}Use renderer-supported layout and inline styles. Do not assume browser CSS, client hooks or arbitrary DOM APIs work inside an OG template.
Add a template
Define a bounded Zod parameter schema, add a registry entry and render with the shared frame. Connect it through the SEO helper so canonical image URLs use the intended origin. Test every locale with native rendering and verify the actual built Worker path; a Node PNG is not proof that the WASM path works.