Lovable + Resend Integration: Transactional Email Guide

Resend is available as a native Lovable connector, meaning Lovable's AI has built-in context for generating Resend-specific code — you don't need to hand-write the API calls yourself. Open your project and click the Settings icon in the top-right corner of the editor. Navigate to Connectors, find Resend, and click 'Connect.' This works both as an app connector (available in your deployed app) and a chat connector (giving the AI context while you're building). Activating the connector tells Lovable's AI that Resend is in scope for this project. When you describe an email feature afterward, Lovable will generate the correct Resend API call pattern, the right Edge Function structure for the Deno runtime, and appropriate error handling — rather than guessing at a generic email integration. If you don't already have a Resend account, create one for free at resend.com — no credit card is required to start, and the free tier includes a meaningful monthly sending allowance for testing and early-stage use.

With the connector activated, store your Resend API key securely. Get your key from Resend Dashboard → API Keys → Create API Key. Choose 'Sending access' if this key will only send email (recommended for most projects), or 'Full access' if you also need to manage domains or audiences programmatically. The key will start with re_. In Lovable, click the '+' icon next to the Preview label to open the Cloud panel, then click the Secrets tab. Click 'Add new secret' and add: Name: RESEND_API_KEY — Value: your key (starts with re_) Secrets are encrypted, accessible only from Edge Functions, and never exposed to client-side code or stored in your GitHub repository. Never paste the API key directly into Lovable's chat — on the Free tier, chat history is publicly visible, and even on paid tiers it risks ending up in your Git commit history.

Before you can send email from your own domain (e.g. no-reply@yourapp.com) rather than Resend's shared testing domain, you need to verify domain ownership. Go to Resend Dashboard → Domains → Add Domain and enter your domain. Resend will generate a set of DNS records — typically an SPF TXT record and one or more DKIM CNAME or TXT records. Add these records at your domain registrar or DNS provider (the same place you manage your custom domain for the Lovable app, if you've connected one). DNS propagation can take anywhere from a few minutes to a few hours. Once propagated, return to Resend Dashboard → Domains and click 'Verify.' The domain should show a green 'Verified' status with checks next to both SPF and DKIM before you rely on it for production sends. Skipping this step doesn't block you from testing — Resend provides a shared testing domain — but any email sent from an unverified custom domain is far more likely to land in spam, and some receiving mail servers will reject it outright.

With the connector active and your key stored, describe the email feature you need and let Lovable generate the implementation. For a welcome email sent after signup, paste a prompt describing exactly when it should fire and what it should contain. Lovable will generate an Edge Function that calls the Resend API, wire it to fire after the relevant database event (in this case, a new row in your users or profiles table), and include basic error handling so a failed email send doesn't block the signup flow itself.

1// supabase/functions/send-welcome-email/index.ts
2import { Resend } from 'https://esm.sh/resend@3.2.0';
3
4const resend = new Resend(Deno.env.get('RESEND_API_KEY'));
5
6Deno.serve(async (req) => {
7  try {
8    const { email, name } = await req.json();
9
10    if (!email) {
11      return new Response(JSON.stringify({ error: 'Missing email' }), { status: 400 });
12    }
13
14    const { data, error } = await resend.emails.send({
15      from: 'Welcome <no-reply@yourapp.com>',
16      to: email,
17      subject: `Welcome, ${name || 'there'}!`,
18      html: `<p>Hi ${name || 'there'},</p><p>Thanks for signing up. We're glad you're here.</p>`,
19    });
20
21    if (error) {
22      console.error('Resend error:', error);
23      return new Response(JSON.stringify({ error: error.message }), { status: 500 });
24    }
25
26    return new Response(JSON.stringify({ id: data?.id }), {
27      headers: { 'Content-Type': 'application/json' },
28    });
29  } catch (err) {
30    console.error('send-welcome-email error:', err);
31    return new Response(JSON.stringify({ error: 'Failed to send email' }), { status: 500 });
32  }
33});

The second most common Resend use case is notifying yourself when a visitor submits a contact form — this reuses the same connector and API key, just with a different trigger and recipient. Describe the form fields you're collecting and where the notification should be sent. This pattern also works for order notifications, support ticket alerts, or any 'notify the team' email — the structure is identical, only the trigger and recipient change.

Test email flows on your deployed app URL, not just the preview panel — some Edge Function behavior, including environment variable access, is most reliably tested against the live deployment. Click Publish in the top-right corner of the editor. After deployment, trigger the flow (sign up a test account, or submit the contact form) and check two places for confirmation. In Resend Dashboard → Logs, you'll see every API call made, including the full request payload, delivery status, and any errors returned. In Lovable's Cloud → Logs, you'll see the Edge Function's own execution logs, including any errors thrown before the Resend API was even called — useful for distinguishing 'Resend rejected the email' from 'my Edge Function crashed before sending it.'