See exactly how your link will look on X, LinkedIn, Slack, iMessage, Discord, WhatsApp and Google before you ship. Live editor with character limits, drag-and-drop OG image, an Open Graph health score (ratio, resolution, lengths, HTTPS) and one-click copy of HTML meta tags or Next.js metadata.
import SocialPreview from "@/components/ui/social-preview"
// A self-contained 1200×630 OG image, so the demo works offline.
const OG_IMAGE_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="630" viewBox="0 0 1200 630">
<defs>
<linearGradient id="bg" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#0a0a12"/><stop offset="1" stop-color="#170f2e"/></linearGradient>
<linearGradient id="mark" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#a78bfa"/><stop offset="1" stop-color="#22d3ee"/></linearGradient>
<filter id="blur" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="70"/></filter>
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M40 0H0V40" fill="none" stroke="#ffffff" stroke-opacity="0.05"/></pattern>
</defs>
<rect width="1200" height="630" fill="url(#bg)"/>
<rect width="1200" height="630" fill="url(#grid)"/>
<g filter="url(#blur)" opacity="0.9">
<circle cx="980" cy="120" r="170" fill="#7c3aed"/>
<circle cx="1120" cy="420" r="140" fill="#22d3ee" opacity="0.7"/>
<circle cx="760" cy="560" r="120" fill="#f472b6" opacity="0.5"/>
</g>
<rect x="80" y="80" width="56" height="56" rx="16" fill="url(#mark)"/>
<path d="M98 96v24h20" fill="none" stroke="#0a0a12" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
<text x="156" y="120" font-family="ui-sans-serif,system-ui,-apple-system,Helvetica,Arial" font-size="34" font-weight="600" fill="#ffffff">Lumen</text>
<text x="80" y="300" font-family="ui-sans-serif,system-ui,-apple-system,Helvetica,Arial" font-size="76" font-weight="700" letter-spacing="-2" fill="#ffffff">The calm inbox</text>
<text x="80" y="388" font-family="ui-sans-serif,system-ui,-apple-system,Helvetica,Arial" font-size="76" font-weight="700" letter-spacing="-2" fill="#ffffff">for teams that ship.</text>
<text x="80" y="470" font-family="ui-sans-serif,system-ui,-apple-system,Helvetica,Arial" font-size="28" fill="#ffffff" fill-opacity="0.6">Email · Slack · GitHub — one prioritized feed.</text>
<g transform="translate(820 170) rotate(-6)">
<rect width="300" height="84" rx="18" fill="#ffffff" fill-opacity="0.08" stroke="#ffffff" stroke-opacity="0.15"/>
<circle cx="40" cy="42" r="16" fill="#a78bfa"/><rect x="70" y="28" width="150" height="10" rx="5" fill="#ffffff" fill-opacity="0.7"/><rect x="70" y="48" width="190" height="8" rx="4" fill="#ffffff" fill-opacity="0.3"/>
<g transform="translate(24 104)"><rect width="300" height="84" rx="18" fill="#ffffff" fill-opacity="0.1" stroke="#ffffff" stroke-opacity="0.18"/>
<circle cx="40" cy="42" r="16" fill="#22d3ee"/><rect x="70" y="28" width="120" height="10" rx="5" fill="#ffffff" fill-opacity="0.7"/><rect x="70" y="48" width="170" height="8" rx="4" fill="#ffffff" fill-opacity="0.3"/></g>
<g transform="translate(48 208)"><rect width="300" height="84" rx="18" fill="#ffffff" fill-opacity="0.12" stroke="#ffffff" stroke-opacity="0.2"/>
<circle cx="40" cy="42" r="16" fill="#f472b6"/><rect x="70" y="28" width="160" height="10" rx="5" fill="#ffffff" fill-opacity="0.7"/><rect x="70" y="48" width="140" height="8" rx="4" fill="#ffffff" fill-opacity="0.3"/></g>
</g>
</svg>`
const OG_IMAGE = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(OG_IMAGE_SVG)}`
const settings = {
title: "Lumen — the calm inbox for teams that ship",
description:
"Lumen turns email, Slack threads and GitHub pings into one prioritized feed. Keyboard-first, zero inbox anxiety, free for teams up to 10.",
url: "https://lumen.so/launch",
siteName: "Lumen",
twitterHandle: "@lumenhq",
showCode: true,
}
export default function Demo(props: Partial<typeof settings>) {
const s = { ...settings, ...props }
return (
<div className="flex min-h-screen w-full items-center justify-center bg-background p-4 sm:p-8">
<SocialPreview
className="max-w-6xl"
defaultPlatform="x"
showCode={s.showCode}
defaultValue={{
title: s.title,
description: s.description,
url: s.url,
image: OG_IMAGE,
siteName: s.siteName,
twitterHandle: s.twitterHandle,
}}
/>
</div>
)
}