Resend

Send transactional emails from your Juice app with Resend. Create the client in your server entry, share it via context, and send emails from any server action or API route.

Install

bun add resend

Setup

Create a Resend client and share it via a typed context key, the same pattern as every other integration.

// server.ts
import { Resend } from 'resend';
import { createContextKey, setContext } from '@cmj/juice/runtime';

const resend = new Resend(process.env.RESEND_API_KEY);

export const resendKey = createContextKey<Resend>('resend');

// In your router config:
onBeforeRequest: async (req) => {
  setContext(req, resendKey, resend);
}

Send Email from a Server Action

Server actions have full access to context. Grab the Resend client and send the email — the form works with and without JavaScript.

// app/routes/invite.tsx
import React from 'react';
import { getContext, redirect } from '@cmj/juice/runtime';
import { resendKey } from '../../server.js';

async function sendWelcome(formData: FormData) {
  'use server';
  const resend = getContext(this.request, resendKey)!;

  await resend.emails.send({
    from: 'noreply@myapp.com',
    to: formData.get('email') as string,
    subject: 'Welcome',
    html: '<h1>Welcome to our app!</h1>',
  });

  redirect('/', 303);
}

export default function Invite() {
  return (
    <form action={sendWelcome} method="POST">
      <label>
        Email address
        <input type="email" name="email" required />
      </label>
      <button type="submit">Send Invite</button>
    </form>
  );
}

React Email Templates

For richer HTML emails, use @react-email/components to build templates as React components. Since Juice server components can render any React tree, you can render email templates on the server and pass the resulting HTML to Resend.

import { render } from '@react-email/render';
import { WelcomeEmail } from './emails/welcome.js';

async function sendWelcome(formData: FormData) {
  'use server';
  const resend = getContext(this.request, resendKey)!;
  const email = formData.get('email') as string;

  const html = await render(<WelcomeEmail name={email} />);

  await resend.emails.send({
    from: 'noreply@myapp.com',
    to: email,
    subject: 'Welcome',
    html,
  });

  redirect('/', 303);
}