> ## Documentation Index > Fetch the complete documentation index at: https://docs.context.dev/llms.txt > Use this file to discover all available pages before exploring further. # Build Branded Email Templates > Fetch logos, colors, fonts, images, and live screenshots from any domain, then have an LLM generate an on-brand HTML email template ready to send. export const EmailTemplateDemo = () => { const KINDS = [{ id: "welcome", label: "Welcome" }, { id: "upgrade", label: "Upgrade" }, { id: "trial", label: "Trial ending" }]; const TRY = ["airbnb.com", "spotify.com", "stripe.com", "discord.com"]; const DEFAULT_DOMAIN = "airbnb.com"; const DEFAULT_KIND = "welcome"; const DEFAULT_HTML = '
\n\n
\n Airbnb\n
\n\n \n \n \n \n
\n
Welcome, traveler
\n
Belong
Anywhere.
\n
\n
\n\n
\n

Your Airbnb account is live. You\'ve just unlocked a community of over 5 million hosts across nearly every corner of the world.

\n

Tell us where you\'d love to wake up next — a cabin in the pines, a loft in Lisbon, a treehouse you\'ll talk about for years. We\'ll handle the rest.

\n\n Start exploring\n
\n\n
\n \n \n \n \n \n \n
\n
5M+
\n
Hosts ready
to welcome you
\n 		\n
220
\n
Countries and
regions
\n 		\n
1.5B
\n
Guest arrivals
and counting
\n
\n
\n\n
\n
\n Sent with care from Airbnb.
\n airbnb.com\n  · \n Privacy\n  · \n Terms\n
\n
\n\n
'; const DEFAULT_BRAND = { title: "Airbnb", domain: "airbnb.com", colors: [{ hex: "#fc3c5c" }, { hex: "#fc9cb4" }, { hex: "#fb5c74" }] }; const STATIC = { "airbnb.com:welcome": { html: DEFAULT_HTML, brand: DEFAULT_BRAND }, "airbnb.com:upgrade": { html: '
\n
\n
\n Airbnb\n

Host more. Earn more. Go Plus.

\n

You\'ve been hosting on the free plan — and your listings are doing great. Upgrade to Airbnb Host Plus to unlock professional photography credits, priority placement in search, and smart pricing that adjusts nightly rates for you.

\n

Plus hosts see an average of 23% more bookings in their first three months. Your calendar, payouts, and reviews carry over instantly — nothing to set up.

\n Upgrade to Host Plus\n
\n
\n \n \n \n \n \n
© 2024 Airbnb, Inc. All rights reserved.airbnb.com
\n
', brand: { title: "Airbnb", domain: "airbnb.com", colors: [{ hex: "#fc3c5c" }, { hex: "#fc9cb4" }, { hex: "#fb5c74" }] } }, "airbnb.com:trial": { html: '
\n \n
\n\n \n \n \n \n \n
\n Airbnb\n
\n\n \n \n \n \n \n
\n

Your Host Plus trial ends in 3 days.

\n

Keep priority placement, smart pricing, and photography credits.

\n
\n\n \n
\n

\n Your 30-day Host Plus trial wraps up on Friday. During the trial your listings earned priority placement in search and your nightly rates were tuned automatically by smart pricing — features that go away when the trial ends.\n

\n

\n Subscribe before Friday and nothing changes: your placement, pricing rules, and remaining photography credits all carry over. If you do nothing, your account simply returns to the free hosting plan.\n

\n\n \n
\n Keep Host Plus\n
\n
\n\n \n
\n\n \n
\n

You\'re receiving this because you started a Host Plus trial at

\n airbnb.com\n

© 2024 Airbnb, Inc. · Belong Anywhere

\n
\n
', brand: { title: "Airbnb", domain: "airbnb.com", colors: [{ hex: "#fc3c5c" }, { hex: "#fc9cb4" }, { hex: "#fb5c74" }] } }, "spotify.com:welcome": { html: '
\n \n
\n\n \n \n \n \n \n \n
SpotifySpotify
\n\n \n
\n

\n Welcome to Spotify. 🎧\n

\n
\n\n \n
\n

\n Your account is live and your soundtrack awaits. With millions of songs, podcasts, and audiobooks at your fingertips, Spotify is built for every single moment — whether you\'re powering through a workout, winding down at night, or discovering your next obsession.\n

\n

\n Dive in and let our personalized playlists and recommendations do the heavy lifting — your taste is unique, and Spotify is here to match it.\n

\n
\n\n \n
\n \n Start Listening Now →\n \n
\n\n \n
\n\n \n \n \n \n \n \n
© 2024 Spotify. All rights reserved.spotify.com
\n \n
\n
', brand: { title: "Spotify", domain: "spotify.com", colors: [{ hex: "#1cd462" }, { hex: "#207f3f" }] } }, "spotify.com:upgrade": { html: '
\n \n
\n\n \n \n \n \n \n \n
SpotifySpotify
\n\n \n
\n \n \n \n \n \n \n
 \n

\n Go Premium.
\n Ads off. Volume up.\n

\n
\n\n \n

\n You\'ve been listening free — nice. But every ad break is a beat you didn\'t hear. Upgrade to Spotify Premium for ad-free listening, offline downloads for the subway and the sky, and unlimited skips when the shuffle isn\'t reading the room.\n

\n\n \n

\n Premium also unlocks the highest audio quality we offer, so your playlists sound the way the artists intended. Your library, follows, and Discover Weekly come with you — just without the interruptions.\n

\n\n \n \n Get Premium →\n \n
\n\n \n
\n\n \n \n \n \n \n \n
© 2024 Spotify. All rights reserved.spotify.com
\n\n \n
\n
', brand: { title: "Spotify", domain: "spotify.com", colors: [{ hex: "#1cd462" }, { hex: "#207f3f" }] } }, "spotify.com:trial": { html: '
\n \n
\n\n \n \n \n \n \n \n
SpotifySpotify
\n\n \n \n \n \n \n
\n \n \n \n \n
\n

Premium ends in 3 days ⏳

\n

Keep the music going — without the ads.

\n
\n
\n\n \n
\n

\n Your free Premium trial ends on Thursday. After that, ads return between songs, offline downloads stop syncing, and skips go back to being limited — your playlists and follows stay, but the experience changes.\n

\n

\n Keep Premium and nothing is interrupted: ad-free listening, downloads for offline trips, unlimited skips, and the highest audio quality we offer. Cancel anytime — no long-term commitment.\n

\n\n \n Keep Premium\n
\n\n \n
\n\n \n \n \n \n \n \n
© 2024 Spotify. All rights reserved.spotify.com
\n
', brand: { title: "Spotify", domain: "spotify.com", colors: [{ hex: "#1cd462" }, { hex: "#207f3f" }] } }, "stripe.com:welcome": { html: '
\n
\n
\n Stripe\n

Welcome to Stripe.

\n

Your account is ready — you now have access to the financial infrastructure that millions of businesses use to accept payments, issue cards, manage subscriptions, and build exactly the revenue model they need.

\n

From powerful APIs to real-time analytics with Sigma, fraud prevention with Radar, and seamless billing — everything you need to grow your revenue is already inside your dashboard.

\n Go to your Dashboard →\n
\n
\n \n \n \n \n \n
© 2025 Stripe, Inc.stripe.com
\n
\n

You\'re receiving this email because you recently created a Stripe account. If this wasn\'t you, please contact support@stripe.com.

\n
\n
', brand: { title: "Stripe", domain: "stripe.com", colors: [{ hex: "#543cfb" }, { hex: "#a498ec" }, { hex: "#041424" }] } }, "stripe.com:upgrade": { html: '
\n
\n
\n
\n Stripe\n
\n

Your volume has outgrown Standard.

\n

\n You processed more than $50,000 last month — at that scale, Stripe Scale pays for itself. Unlock volume discounts on every transaction, advanced revenue recognition, and Sigma\'s full SQL analytics over all of your payments data.\n

\n

\n Upgrading takes effect immediately: your integration, API keys, and webhooks stay exactly as they are, and Radar\'s machine-learning fraud rules get the priority-tuning tier. You\'ll also get a dedicated support channel with 4-hour response times.\n

\n Upgrade to Scale →\n
\n
\n \n \n \n \n \n
© 2025 Stripe, Inc.stripe.com
\n
', brand: { title: "Stripe", domain: "stripe.com", colors: [{ hex: "#543cfb" }, { hex: "#a498ec" }, { hex: "#041424" }] } }, "stripe.com:trial": { html: '
\n
\n
\n
\n Stripe\n
\n

Your Scale trial ends in 5 days.

\n

\n On June 16 your account returns to the Standard plan. That means Sigma\'s SQL analytics, advanced revenue recognition, and Radar\'s priority-tuning tier will be switched off — saved Sigma queries are kept for 30 days, but they won\'t run until you upgrade.\n

\n

\n Payments are never interrupted: your integration, API keys, and webhooks keep working either way. To keep the Scale features your team has been using, add a payment method before the trial ends.\n

\n Keep Scale features →\n
\n
\n \n \n \n \n \n
© 2025 Stripe, Inc.stripe.com
\n
', brand: { title: "Stripe", domain: "stripe.com", colors: [{ hex: "#543cfb" }, { hex: "#a498ec" }, { hex: "#041424" }] } }, "discord.com:welcome": { html: '
\n\n \n
\n\n \n \n \n \n \n \n
DiscordDiscord
\n\n \n
\n\n \n

\n Welcome to the party. 🎉\n

\n\n \n

\n You\'ve just joined the place where group chat is all fun & games — a platform built to turn every conversation into something worth showing up for, whether you\'re coordinating raids, watching streams, or just hanging out.\n

\n\n \n

\n Your account is ready and your next great community is one click away. Explore servers, create your own space, and make it entirely yours — Discord is whatever you need it to be.\n

\n\n \n \n Open Discord →\n \n\n
\n\n \n
\n\n \n \n \n \n \n \n
discord.com© 2024 Discord Inc. All rights reserved.
\n\n
', brand: { title: "Discord", domain: "discord.com", colors: [{ hex: "#141cbc" }, { hex: "#848cd4" }] } }, "discord.com:upgrade": { html: '
\n \n
\n\n \n
\n\n \n \n \n \n \n \n
Discord iconDiscord
\n\n \n

\n Level up with Nitro 🚀\n

\n\n \n

\n Your servers are popping off — time to upgrade the experience. Discord Nitro unlocks 4K streaming, 500MB uploads, custom emoji anywhere, animated avatars, and two free server boosts to share with your favorite communities.\n

\n

\n Everything about your account stays the same — your servers, friends, and messages — you just get more ways to make it yours. Upgrade in two clicks and the perks kick in instantly.\n

\n\n \n \n Get Nitro →\n \n\n
\n\n \n
\n\n \n \n \n \n \n \n
© 2024 Discord · discord.comYou\'re receiving this because you signed up.
\n
', brand: { title: "Discord", domain: "discord.com", colors: [{ hex: "#141cbc" }, { hex: "#848cd4" }] } }, "discord.com:trial": { html: '
\n \n
\n\n \n
\n\n \n \n \n \n \n \n
Discord iconDiscord
\n\n \n

\n Your Nitro trial ends in 2 days. ⏰\n

\n\n \n

\n Heads up: when the trial ends on Saturday, your animated avatar goes still, uploads drop back to 8MB, HD streaming switches off, and the two server boosts you placed will be removed from your communities.\n

\n

\n Keep Nitro and nothing changes — same perks, same boosts, same custom emoji everywhere. Lock it in before Saturday and your boosted servers never notice a thing.\n

\n\n \n \n Keep Nitro →\n \n\n
\n\n \n
\n\n \n \n \n \n \n \n
discord.com© 2024 Discord Inc. All rights reserved.
\n
', brand: { title: "Discord", domain: "discord.com", colors: [{ hex: "#141cbc" }, { hex: "#848cd4" }] } } }; const [domain, setDomain] = useState(DEFAULT_DOMAIN); const [kind, setKind] = useState(DEFAULT_KIND); const [html, setHtml] = useState(DEFAULT_HTML); const [brand, setBrand] = useState(DEFAULT_BRAND); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const isDefault = html === DEFAULT_HTML && domain === DEFAULT_DOMAIN && kind === DEFAULT_KIND; async function select(d, k) { if (d === domain && k === kind || loading) return; setDomain(d); setKind(k); setError(null); setLoading(true); await new Promise(r => setTimeout(r, 900)); const hit = STATIC[`${d}:${k}`]; setHtml(hit.html); setBrand(hit.brand); setLoading(false); } function reset() { setDomain(DEFAULT_DOMAIN); setKind(DEFAULT_KIND); setHtml(DEFAULT_HTML); setBrand(DEFAULT_BRAND); setError(null); } const primary = brand && brand.colors && brand.colors[0] && brand.colors[0].hex || null; const secondary = brand && brand.colors && brand.colors[1] && brand.colors[1].hex || null; const cleanDomain = brand && brand.domain || domain; const name = brand && brand.title || cleanDomain; const currentKind = KINDS.find(k => k.id === kind) || KINDS[0]; const srcDoc = `${html}`; return
Live demo {isDefault ? context.dev context.dev : }
e.preventDefault()}>
Change demo {TRY.map(d => )}
{KINDS.map(k => )}
{error &&
{error}
}
{currentKind.label} · {name}
{primary && <> {primary} } {secondary && <> {secondary} }