import { ImageResponse } from "@vercel/og"; export const config = { runtime: "experimental-edge", }; export default function handler(req) { try { const { searchParams } = new URL(req.url); const hasTitle = searchParams.has("title"); const title = hasTitle ? searchParams.get("title")?.slice(0, 100) : "Hello World!"; return new ImageResponse( ( <div style={{ fontSize: 40, color: "#373737", background: "#ffffff", width: "100%", height: "100%", padding: "50px 200px", display: "flex", justifyContent: "center", alignItems: "center", }} > <div tw="border-2 border-solid border-[#373737] p-2" style={{ boxShadow: "11px 4px 3px 4px rgba(55,55,55,0.8)", display: "flex", gap: "10px", }} > <span tw="text-[100px]">{title}</span> </div> </div> ), { width: 1200, height: 630, } ); } catch (e) { return new Response(`Failed to generate the image`, { status: 500, }); } }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter