Resend

Send transactional and marketing emails from your vly app via Resend. Generous free tier, beautiful developer experience, deliverability built in.

Resend is a modern email API. Clean docs, generous free tier (3,000 emails/month, 100/day), and deliverability that just works. It’s the default email integration in vly for transactional sends.

Prerequisites

Setup

1. Get your Resend API key

   1. Sign in at resend.com/api-keys.
   2. Click Create API key.
   3. Name it vly-yourapp.
   4. Set permission to Sending access (limit by domain if you’ve verified one).
   5. Copy the key (starts with re_...).
2. Verify a domain (or skip for testing)

   For production, verify the domain you’ll send from:

   1. In Resend, Domains → Add domain (e.g., yourapp.com).
   2. Add the DNS records Resend shows (4–5 records).
   3. Wait for verification (usually under 5 minutes).

   For testing, you can use [e-mail] as the sender — no domain setup needed.

3. Connect Resend in vly

   In a prompt:

   Send transactional emails via Resend. I'll provide my API key.
   

   vly opens the integration setup dialog. Paste your key. The key is stored as RESEND_API_KEY.

4. Use it in a feature

   When a new user signs up, send them a welcome email via Resend.
   Sender: [e-mail]. Subject: "Welcome to YourApp". Body
   includes a friendly greeting, a link to /getting-started, and
   a "Reply to talk to us" line.
   

   vly creates a Convex action and wires it into the signup flow.

Configuration

RESEND_API_KEY · string · required

Your Resend API key. Server-only. Starts with re_.

RESEND_FROM_EMAIL · string · required

Default sender email. Must be from a verified Resend domain (or [e-mail] for testing).

RESEND_FROM_NAME · string

Optional. Display name. Renders as "Display Name <[e-mail]>".

Code patterns

Send a single email

convex/email.ts

import { action } from "./_generated/server";
import { v } from "convex/values";

export const sendWelcome = action({
  args: { to: v.string(), name: v.string() },
  handler: async (_ctx, { to, name }) => {
    const res = await fetch("https://api.resend.com/emails", {
      method: "POST",
      headers: {
        "Authorization": `Bearer ${process.env.RESEND_API_KEY}`,
        "Content-Type":  "application/json",
      },
      body: JSON.stringify({
        from: `${process.env.RESEND_FROM_NAME} <${process.env.RESEND_FROM_EMAIL}>`,
        to,
        subject: "Welcome to YourApp",
        html: `
          <p>Hi ${name},</p>
          <p>Welcome aboard. Here's where to start: <a href="https://yourapp.com/getting-started">Getting started</a>.</p>
          <p>— The YourApp team</p>
        `,
      }),
    });

    if (!res.ok) {
      throw new Error(`Resend error: ${res.status} ${await res.text()}`);
    }
    return await res.json();
  },
});

Use react-email for templates

For richer emails, use react-email:

emails/Welcome.tsx

import { Html, Body, Container, Text, Link } from "@react-email/components";

export default function Welcome({ name }: { name: string }) {
  return (
    <Html>
      <Body style={{ fontFamily: "system-ui, sans-serif", padding: 24 }}>
        <Container style={{ maxWidth: 540 }}>
          <Text>Hi {name},</Text>
          <Text>Welcome aboard. Here's where to start:</Text>
          <Link href="https://yourapp.com/getting-started">
            Getting started →
          </Link>
        </Container>
      </Body>
    </Html>
  );
}

convex/email.ts

import { render } from "@react-email/render";
import Welcome from "../emails/Welcome";

const html = render(<Welcome name={name} />);
// pass `html` into the Resend API call above

vly will set this up if you ask: “Use react-email for the welcome email template.”

Idempotent sends

Avoid duplicate emails on retry by adding an idempotency key:

body: JSON.stringify({
  from, to, subject, html,
  // Resend doesn't have native idempotency, so dedupe in your DB:
}),

// Before sending, check whether you've already sent this email
const existing = await ctx.runQuery(api.emails.findByKey, { key: idempotencyKey });
if (existing) return existing;

// After sending, record it
await ctx.runMutation(api.emails.recordSend, { key: idempotencyKey, ... });

Webhook: track delivery and bounces

Resend sends webhooks for delivery, open, click, bounce, and complaint events:

convex/http.ts

http.route({
  path: "/api/resend-webhook",
  method: "POST",
  handler: httpAction(async (ctx, req) => {
    const sig  = req.headers.get("svix-signature")!;
    const body = await req.text();

    // (Verify Svix signature — Resend uses Svix for webhooks)

    const event = JSON.parse(body);

    if (event.type === "email.bounced") {
      await ctx.runMutation(api.users.markBounced, { email: event.data.to });
    }

    return new Response(null, { status: 200 });
  }),
});

Register the webhook URL in Resend → Webhooks.

Email templates worth setting up

Welcome email

First impression. Triggered on signup. Keep it short, link to onboarding.

Password reset

Auto-handled by built-in auth — but you can customize the template.

Email verification

Auto-handled. Customize the template to match your brand.

Receipt / invoice

Trigger on Stripe checkout.session.completed. Include order details and a link to the customer portal.

Notification digest

Daily or weekly digest of activity (mentions, assignments, etc.) — gentler than per-event emails.

Magic link

For passwordless auth. Auto-handled.

Deliverability tips

Verify your domain

Sending from a verified domain (with SPF, DKIM, and DMARC) is the single biggest deliverability lever. Don’t send production mail from [e-mail].

Set up DMARC

Resend will guide you through SPF and DKIM during domain verification. DMARC is one extra DNS record (_dmarc.yourapp.com TXT "v=DMARC1; p=none; rua=mailto:[e-mail]"). Worth doing.

Don't send to invalid addresses

Hard bounces hurt your sender reputation. When you get a bounce webhook, mark the address invalid and stop sending.

Include unsubscribe links

Required for marketing email; good practice for transactional too. Resend provides a one-click unsubscribe header.

Warm up new domains slowly

A brand-new domain sending 10,000 emails on day one looks like spam. Ramp up over a week or two for production sends.

Cost

Resend’s free tier: 3,000 emails/month, 100/day. Paid plans start at $20/month for 50,000 emails. For most vly apps, the free tier is more than enough through early production.

Comparison with alternatives

Provider	Free tier	Pros	Cons
Resend	3,000/mo, 100/day	Modern API, react-email, fast	Newer, smaller ecosystem
SendGrid	100/day	Mature, deep features	Older API, complex pricing
Postmark	100/mo	Best deliverability, transactional-only	Pricier per email
Mailchimp	1,000/mo	Marketing-focused	Heavy for transactional

For most vly apps, Resend is the recommended default.

Troubleshooting

'401 Unauthorized'

API key is wrong or revoked. Re-check RESEND_API_KEY in your environment variables.

'Domain is not verified'

The from address uses a domain you haven’t verified in Resend. Either verify it or send from [e-mail] for testing.

Emails arrive in spam

Verify your domain (SPF, DKIM, DMARC). Avoid spammy-sounding subjects. Send from a real-looking sender ([e-mail], not [e-mail]). Don’t use ALL CAPS.

Daily limit hit on free tier

Free tier is 100/day. For higher volume, upgrade to a paid Resend plan.

Related

Email campaigns recipe

Send a campaign to a list of users.

Newsletter platform recipe

Build a complete newsletter app.

Webhooks pattern

The general pattern for handling Resend webhooks.