Meta tags:
description=Learn how to send beautiful emails using React Email and Trigger.dev.;

Headings (most frequently used words):

email, using, task, the, your, guides, emails, react, code, cursor, example, template, generated, send, documentation, index, overview, testing, deploying, ai, to, build, troubleshooting, learn, more, components, templates, on, this, page, introduction, frameworks, migration, use, cases, projects, python, tasks, community, packages, docs, video, creating, new,

Text of the page (most frequently used words):
email (48), trigger (32), dev (26), from (25), error (24), the (23), style (23), react (22), const (19), using (18), you (18), your (17), resend (17), text (17), and (15), #emails (14), task (14), name (14), payload (14), this (13), send (13), string (12), link (11), image (10), use (10), message (10), page (9), docs (9), can (9), for (9), logger (9), https (9), our (8), data (8), sdk (8), button (8), paragraph (8), container (8), example (8), how (7), new (7), cursor (7), preview (7), subject (7), welcome (7), import (7), anchor (7), href (7), documentation (6), components (6), address (6), padding (6), html (6), body (6), with (6), heading (6), generated (5), learn (5), template (5), build (5), copy (5), out (5), guide (5), triggerwelcomeemail (5), export (5), env (5), process (5), color (5), built (4), github (4), more (4), code (4), video (4), overview (4), generation (4), check (4), throw (4), sent (4), failed (4), tsx (4), backgroundcolor (4), 20px (4), inc (4), help (4), dashboard (4), head (4), tasks (4), processing (4), agents (4), guides (4), generator (4), agent (4), claude (4), status (3), home (3), creating (3), images (3), replicate (3), templates (3), see (3), sending (3), return (3), info (3), default (3), com (3), 16px (3), 12px (3), fontsize (3), margin (3), main (3), section (3), discord (3), get (3), examples (3), jobs (3), background (3), acme (3), search (3), triggerdotdev (3), vercel (3), supabase (3), pdf (3), openai (3), fal (3), realtime (3), assistant (2), platform (2), linkedin (2), service (2), product (2), source (2), changelog (2), developers (2), troubleshooting (2), deploying (2), testing (2), next (2), pre (2), ready (2), set (2), when (2), packages (2), unexpected (2), catch (2), emailid (2), successfully (2), acmeinc (2), needs (2), verified (2), await (2), try (2), async (2), run (2), sendemail (2), resend_api_key (2), initialize (2), client (2), following (2), lineheight (2), footer (2), width (2), textalign (2), borderradius (2), 48px (2), box (2), sans (2), serif (2), fontfamily (2), here (2), other (2), community (2), inspiration (2), workflows (2), look (2), integrations (2), triggers (2), quickstart (2), started (2), view (2), projects (2), signing (2), img (2), triggerwelcomeemailprops (2), vercel_url (2), deploy (2), like (2), emailtemplate (2), file (2), sveltekit (2), database (2), puppeteer (2), web (2), python (2), prisma (2), media (2), migrating (2), setup (2), index (2), responses, are, may, contain, mistakes, hosted, mintlify, developer, powered, terms, privacy, careers, contact, blog, company, uptime, faqs, roadmap, features, works, pricing, oss, friends, open, contributing, generate, urls, previous, yes, was, helpful, extensive, paste, into, including, locally, information, common, problems, reactdomserver, rendertopipeablestream, not, function, then, 9ca3af, 100, block, display, center, none, textdecoration, bold, fontweight, fff, 6px, 7c3aed, a78bfa, left, 24px, e1e1e3, 2d2b3b, bordercolor, 64px, marginbottom, auto, 1d1b27, apple, system, blinkmacsystemfont, segoe, roboto, helvetica, neue, ubuntu, 0e0c15, team, reach, amazing, things, have, any, questions, connect, need, ka47vcd8qr, join, automate, take, create, first, job, configure, cloud, monitor, runs, manage, right, thanks, now, start, powerful, alt, height, 150, assets, triggerdev, lockup, light, svg, src, interface, baseurl, recommend, rules, production, cli, command, thank, jane, doe, recipient, test, just, simple, implementation, customize, complex, want, should, response, own, 8px, white, 0070f3, hello, 600px, maxwidth, arial, lang, component, sendreactemail, must, uses, provider, providers, etc, full, list, their, found, sendgrid, loops, demonstrates, beautiful, navigation, ask, rate, limiter, fatima, dotenvx, sync, vars, storage, upload, operations, sharp, sentry, tracking, browserbase, satori, sequence, retrying, libreoffice, conversion, lightpanda, firecrawl, url, crawl, ffmpeg, cartoon, deepgram, audio, transcription, dall, extract, form, pdfs, headless, crawler, convert, markdown, guardrails, deep, research, turborepo, monorepo, smart, spreadsheet, gen, csv, importer, typescript, playground, meme, mastra, memory, human, loop, workflow, clickhouse, chat, thinking, chatbot, wiki, batch, llm, evaluator, browser, scraper, marketing, etl, cases, n8n, mergent, migration, webhooks, sequin, nango, oauth, drizzle, remix, node, bun, frameworks, introduction, great, way, skip, content, discover, all, available, pages, before, exploring, further, fetch, complete, llms, txt,

Text of the page (random words):
send emails using react email trigger dev documentation index fetch the complete documentation index at docs llms txt use this file to discover all available pages before exploring further skip to main content trigger dev home page search k guides examples a great way to get started introduction overview frameworks bun next js node js remix sveltekit guides ai agents claude agent sdk drizzle setup guide prisma setup guide nango oauth guide sequin database triggers supabase webhooks migration guides migrating from mergent migrating from n8n use cases overview data processing etl ai media generation media processing marketing example projects anchor browser web scraper batch llm evaluator claude changelog generator claude github wiki claude thinking chatbot clickhouse chat agent cursor background agent human in the loop workflow mastra agents with memory ai meme generator openai agents sdk for typescript playground product image generator realtime csv importer realtime image gen with fal ai smart spreadsheet turborepo monorepo with prisma deep research agent vercel ai sdk image generator python guides openai agents sdk for python guardrails process images convert docs to markdown headless web crawler extract form data from pdfs example tasks dall e image generation deepgram audio transcription fal ai image to cartoon fal ai with realtime ffmpeg video processing firecrawl url crawl lightpanda v4 libreoffice pdf conversion openai with retrying pdf to image puppeteer react to pdf react email replicate image generation resend email sequence satori og images browserbase puppeteer sentry error tracking sharp image processing supabase database operations supabase storage upload vercel ai sdk vercel sync env vars community packages dotenvx fatima rate limiter sveltekit triggerdotdev trigger dev trigger dev home page search k ask assistant triggerdotdev trigger dev triggerdotdev trigger dev search navigation example tasks send emails using react email example tasks send emails using react email copy page copy page learn how to send beautiful emails using react email and trigger dev copy page copy page overview this example demonstrates how to use trigger dev to send emails using react email this example uses resend as the email provider you can use other email providers like loops or sendgrid etc full list of their integrations can be found here task code this email is built using react components to use react components in your task it must be a tsx file trigger sendreactemail tsx import body button container head heading html preview from react email components import logger task from trigger dev sdk import resend from resend initialize resend client const resend new resend process env resend_api_key react email template component const emailtemplate name message name string message string html lang en head preview new message from name preview body style fontfamily arial sans serif margin 0 padding 0 container style padding 20px maxwidth 600px heading hello from acme inc heading p hi name p p message p button href https trigger dev style backgroundcolor 0070f3 color white padding 12px 20px borderradius 8px go to acme inc button container body html export const sendemail task id send react email run async payload to string name string message string subject string from string try logger info sending email using react email and resend to payload to send the email using resend const data error await resend emails send the from address needs to be a verified email address you own from payload from email acmeinc com default from address to payload to subject payload subject react emailtemplate name payload name message payload message if error logger error failed to send email error throw new error failed to send email error message logger info email sent successfully emailid data id return the response from resend return id data id status sent catch error logger error unexpected error sending email error throw error the email this example email should look like this this is just a simple implementation you can customize the email to be as complex as you want check out the react email templates for more inspiration testing your task to test this task in the dashboard you can use the following payload to recipient example com name jane doe message thank you for signing up for our service subject welcome to acme inc deploying your task deploy the task to production using the trigger dev cli deploy command using cursor ai to build your emails in this video you can see how we use cursor to build a welcome email we recommend using our cursor rules to help you build your tasks and emails video creating a new email template using cursor the generated email template the generated code emails trigger welcome email tsx import body button container head heading hr html img link preview section text from react email components const baseurl process env vercel_url https process env vercel_url export interface triggerwelcomeemailprops name string export const triggerwelcomeemail name triggerwelcomeemailprops html head preview welcome to trigger dev your background jobs platform preview body style main container style container section style box img src https trigger dev assets triggerdev lockup light svg width 150 height 40 alt trigger dev hr style hr heading welcome name heading text style paragraph thanks for signing up for trigger dev you re now ready to start creating powerful background jobs and workflows text text style paragraph you can monitor your jobs view runs and manage your projects right from your dashboard text button style button href https cloud trigger dev dashboard view your trigger dev dashboard button hr style hr text style paragraph to help you get started check out our link style anchor href https trigger dev docs documentation link and link style anchor href https trigger dev docs quickstart quickstart guide link text text style paragraph you can create your first job using our sdk set up integrations and configure triggers to automate your workflows take a look at our link style anchor href https trigger dev docs examples examples link for inspiration text text style paragraph join our link style anchor href https discord gg ka47vcd8qr discord community link to connect with other developers and get help when you need it text text style paragraph we re here to help you build amazing things if you have any questions check out our link style anchor href https trigger dev docs documentation link or reach out to us on discord text text style paragraph the trigger dev team text hr style hr text style footer trigger dev inc text section container body html export default triggerwelcomeemail const main backgroundcolor 0e0c15 fontfamily apple system blinkmacsystemfont segoe ui roboto helvetica neue ubuntu sans serif const container backgroundcolor 1d1b27 margin 0 auto padding 20px 0 48px marginbottom 64px const box padding 0 48px const hr bordercolor 2d2b3b margin 20px 0 const paragraph color e1e1e3 fontsize 16px lineheight 24px textalign left as const const anchor color a78bfa const button backgroundcolor 7c3aed borderradius 6px color fff fontsize 16px fontweight bold textdecoration none textalign center as const display block width 100 padding 12px const footer color 9ca3af fontsize 12px lineheight 16px and then to trigger the email you can use the following task trigger triggerwelcomeemail tsx import logger task from trigger dev sdk import resend from resend import triggerwelcomeemail from emails trigger welcome email initialize resend client const resend new resend process env resend_api_key export const sendemail task id trigger welcome email run async payload to string name string subject string from string try to payload to const data error await resend emails send the from address needs to be a verified email address from payload from email acmeinc com default from address to payload to subject payload subject react triggerwelcomeemail name payload name if error logger error failed to send email error throw new error failed to send email error message logger info email sent successfully emailid data id return id data id status sent catch error logger error unexpected error sending email error throw error troubleshooting if you see this error when using react email packages reactdomserver rendertopipeablestream is not a function see our common problems guide for more information learn more react email docs check out the react email docs and learn how to set up and use react email including how to preview your emails locally components pre built components you can copy and paste into your emails templates extensive pre built templates ready to use was this page helpful yes no previous replicate image generation learn how to generate images from source image urls using replicate and trigger dev next i on this page overview task code the email testing your task deploying your task using cursor ai to build your emails video creating a new email template using cursor the generated email template the generated code troubleshooting learn more react email docs trigger dev home page x github linkedin developers changelog contributing open source github oss friends product pricing how it works features roadmap faqs uptime status company blog contact careers privacy terms of service x github linkedin powered by this documentation is built and hosted on mintlify a developer documentation platform assistant responses are generated using ai and may contain mistakes