TanStack Start
Use Takumi to render your React components on the server.
og-image.tsx
vite.config.ts
wrangler.toml
Create a server file route
TanStack Start exposes HTTP handlers on a file route via server.handlers. Drop ImageResponse straight into the GET.
import { createFileRoute } from "@tanstack/react-router";
import ImageResponse from "takumi-js/response";
export const Route = createFileRoute("/og-image")({
server: {
handlers: {
GET({ request }) {
const url = new URL(request.url);
const title = url.searchParams.get("title") ?? "Takumi + TanStack Start";
const description =
url.searchParams.get("description") ?? "Render OG images from a route handler.";
return new ImageResponse(
<div
style={{
width: "100%",
height: "100%",
display: "flex",
flexDirection: "column",
justifyContent: "center",
padding: "64px",
backgroundImage: "linear-gradient(to bottom right, #eff6ff, #dbeafe)",
}}
>
<p style={{ fontSize: 72, fontWeight: 700, color: "#111827" }}>{title}</p>
<p style={{ fontSize: 42, fontWeight: 500, color: "#4b5563" }}>{description}</p>
</div>,
{
width: 1200,
height: 630,
},
);
},
},
},
});Hit the route
Open /og-image?title=Hello&description=World and you have an image.
Gotchas
Deploying to Cloudflare. Add the @cloudflare/vite-plugin to vite.config.ts with viteEnvironment: { name: "ssr" }. Takumi's response entrypoint picks the WASM build automatically when the SSR target is Workers — no separate import.
Edit on GitHub
Last updated on