Email Previews

Vard can discover email templates in your codebase, render representative previews, and sync the complete set to the Emails dashboard.

Define an email

Create one .email.ts file per template and export a defineEmail() definition. The preview function may be synchronous or asynchronous.

import { defineEmail } from "@vard-app/sdk";
import { renderOrderConfirmation } from "./render-order-confirmation";
 
export default defineEmail({
  slug: "order-confirmation",
  name: "Order Confirmation",
  group: "Orders",
  trigger: "checkout.completed",
  description: "Sent to the customer after payment succeeds.",
  preview: () =>
    renderOrderConfirmation({
      customerName: "Samy",
      orderNumber: "SAMY1234",
    }),
});

The preview builder must return:

{
  subject: string;
  html: string;
  text?: string;
}

Keep fixture data next to the template so adding an email does not require editing a central registry.

Use the optional group field to organize related templates in the dashboard. For example, use Orders for confirmations and shipping updates, Forms for submission notifications, and Newsletters for subscriber emails. Emails without a group remain supported and appear under Other when grouped emails are present.

Configure discovery

The default pattern is **/*.email.{ts,tsx,js,jsx,mjs,cjs}. Add vard.config.ts only when your project uses a different convention:

import { defineConfig } from "@vard-app/sdk";
 
export default defineConfig({
  emails: {
    include: ["lib/**/*-email.ts", "emails/**/*.tsx"],
  },
});

Sync previews

Set VARD_API_KEY, then run:

vard emails sync

For local development:

vard emails sync --watch

Watch mode performs an initial sync and resyncs when matching files are added, changed, or removed. Vard receives the complete discovered set each time, so templates removed from the codebase are removed from the active dashboard list.

Glob patterns can also be passed directly:

vard emails sync "lib/**/*-email.ts"

Use --config <path> for a nonstandard config location and --api-base <url> for local or self-hosted Vard environments.

Package scripts

A typical project setup is:

{
  "scripts": {
    "emails:dev": "vard emails sync --watch",
    "emails:sync": "vard emails sync",
    "build": "vard emails sync && next build"
  }
}

Run the non-watch command in CI or before deployment. The command exits nonzero for missing API credentials, duplicate slugs, invalid previews, modules without a defineEmail() export, or an empty discovery result.