feat(preview-server): templates api integration

.changeset/cute-pigs-lay.md

@@ -0,0 +1,5 @@
+---
+"@react-email/preview-server": minor
+---
+
+Integrate with Templates API so users can easily turn React Email templates into actual Resend templates

benchmarks/preview-server/src/utils/sleep.ts

@@ -0,0 +1,3 @@
+export function sleep(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}

packages/preview-server/package.json

@@ -41,12 +41,14 @@
     "log-symbols": "4.1.0",
     "module-punycode": "npm:[email protected]",
     "next": "16.0.1",
+    "next-safe-action": "8.0.11",
     "node-html-parser": "7.0.1",
     "ora": "5.4.1",
     "pretty-bytes": "6.1.1",
     "prism-react-renderer": "2.4.1",
     "react": "19.0.0",
     "react-dom": "19.0.0",
+    "resend": "6.4.0",
     "sharp": "0.34.4",
     "socket.io-client": "4.8.1",
     "sonner": "2.0.3",
@@ -56,7 +58,7 @@
     "tailwind-merge": "3.2.0",
     "tailwindcss": "3.4.0",
     "use-debounce": "10.0.4",
-    "zod": "3.24.3"
+    "zod": "4.1.12"
   },
   "devDependencies": {
     "@react-email/components": "workspace:*",

packages/preview-server/src/actions/export-single-template.ts

@@ -0,0 +1,36 @@
+'use server';
+
+import { Resend } from 'resend';
+import { z } from 'zod';
+import { resendApiKey } from '../app/env';
+import { baseActionClient } from './safe-action';
+
+export const exportSingleTemplate = baseActionClient
+  .metadata({
+    actionName: 'exportSingleTemplate',
+  })
+  .inputSchema(
+    z.object({
+      name: z.string(),
+      html: z.string(),
+    }),
+  )
+  .action(async ({ parsedInput }) => {
+    const resend = new Resend(resendApiKey);
+
+    const response = await resend.templates.create({
+      name: parsedInput.name,
+      html: parsedInput.html,
+    });
+
+    if (response.error) {
+      console.error('Error creating single template', response.error);
+      return { name: parsedInput.name, status: 'failed' as const };
+    }
+
+    return {
+      name: parsedInput.name,
+      status: 'succeeded' as const,
+      id: response.data.id,
+    };
+  });

packages/preview-server/src/actions/safe-action.ts

@@ -0,0 +1,15 @@
+import {
+  createSafeActionClient,
+  DEFAULT_SERVER_ERROR_MESSAGE,
+} from 'next-safe-action';
+import { z } from 'zod';
+
+export const baseActionClient = createSafeActionClient({
+  defineMetadataSchema() {
+    return z.object({ actionName: z.string() });
+  },
+  handleServerError(error, options) {
+    console.error(`Action error: ${options.metadata.actionName}`, error);
+    return DEFAULT_SERVER_ERROR_MESSAGE;
+  },
+});

packages/preview-server/src/app/env.ts

@@ -8,6 +8,9 @@ export const previewServerLocation = process.env.PREVIEW_SERVER_LOCATION!;
 export const emailsDirectoryAbsolutePath =
   process.env.EMAILS_DIR_ABSOLUTE_PATH!;
 
+/** ONLY ACCESSIBLE ON THE SERVER */
+export const resendApiKey = process.env.RESEND_API_KEY;
+
 export const isBuilding = process.env.NEXT_PUBLIC_IS_BUILDING === 'true';
 
 export const isPreviewDevelopment =

packages/preview-server/src/app/preview/[...slug]/page.tsx

@@ -12,10 +12,15 @@ import { Toolbar } from '../../../components/toolbar';
 import type { LintingRow } from '../../../components/toolbar/linter';
 import type { SpamCheckingResult } from '../../../components/toolbar/spam-assassin';
 import { PreviewProvider } from '../../../contexts/preview';
+import { ToolbarProvider } from '../../../contexts/toolbar';
 import { getEmailsDirectoryMetadata } from '../../../utils/get-emails-directory-metadata';
 import { getLintingSources, loadLintingRowsFrom } from '../../../utils/linting';
 import { loadStream } from '../../../utils/load-stream';
-import { emailsDirectoryAbsolutePath, isBuilding } from '../../env';
+import {
+  emailsDirectoryAbsolutePath,
+  isBuilding,
+  resendApiKey,
+} from '../../env';
 import Preview from './preview';
 
 export const dynamicParams = true;
@@ -132,11 +137,13 @@ This is most likely not an issue with the preview server. Maybe there was a typo
         <Suspense>
           <Preview emailTitle={path.basename(emailPath)} />
 
-          <Toolbar
-            serverLintingRows={lintingRows}
-            serverSpamCheckingResult={spamCheckingResult}
-            serverCompatibilityResults={compatibilityCheckingResults}
-          />
+          <ToolbarProvider hasApiKey={(resendApiKey ?? '').trim().length > 0}>
+            <Toolbar
+              serverLintingRows={lintingRows}
+              serverSpamCheckingResult={spamCheckingResult}
+              serverCompatibilityResults={compatibilityCheckingResults}
+            />
+          </ToolbarProvider>
         </Suspense>
       </Shell>
     </PreviewProvider>

packages/preview-server/src/components/icons/icon-cloud-alert.tsx

@@ -0,0 +1,18 @@
+import type { IconProps } from './icon-base';
+import { IconBase } from './icon-base';
+
+export const IconCloudAlert = (props: IconProps) => (
+  <IconBase
+    {...props}
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M12 12v4" />
+    <path d="M12 20h.01" />
+    <path d="M17 18h.5a1 1 0 0 0 0-9h-1.79A7 7 0 1 0 7 17.708" />
+  </IconBase>
+);
+
+IconCloudAlert.displayName = 'IconCloudAlert';

packages/preview-server/src/components/icons/icon-cloud-check.tsx

@@ -0,0 +1,17 @@
+import type { IconProps } from './icon-base';
+import { IconBase } from './icon-base';
+
+export const IconCloudCheck = (props: IconProps) => (
+  <IconBase
+    {...props}
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="m17 15-5.5 5.5L9 18" />
+    <path d="M5 17.743A7 7 0 1 1 15.71 10h1.79a4.5 4.5 0 0 1 1.5 8.742" />
+  </IconBase>
+);
+
+IconCloudCheck.displayName = 'IconCloudCheck';

packages/preview-server/src/components/icons/icon-loader.tsx

@@ -0,0 +1,16 @@
+import type { IconProps } from './icon-base';
+import { IconBase } from './icon-base';
+
+export const IconLoader = (props: IconProps) => (
+  <IconBase
+    {...props}
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+  </IconBase>
+);
+
+IconLoader.displayName = 'IconLoader';

packages/preview-server/src/components/toolbar.tsx

@@ -1,18 +1,22 @@
 'use client';
+
 import * as Tabs from '@radix-ui/react-tabs';
 import { LayoutGroup } from 'framer-motion';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import * as React from 'react';
 import type { CompatibilityCheckingResult } from '../actions/email-validation/check-compatibility';
 import { isBuilding } from '../app/env';
 import { usePreviewContext } from '../contexts/preview';
+import { useToolbarContext } from '../contexts/toolbar';
 import { cn } from '../utils';
+import CodeSnippet from './code-snippet';
 import { IconArrowDown } from './icons/icon-arrow-down';
 import { IconCheck } from './icons/icon-check';
 import { IconInfo } from './icons/icon-info';
 import { IconReload } from './icons/icon-reload';
 import { Compatibility, useCompatibility } from './toolbar/compatibility';
 import { Linter, type LintingRow, useLinter } from './toolbar/linter';
+import { ResendIntegration } from './toolbar/resend';
 import {
   SpamAssassin,
   type SpamCheckingResult,
@@ -21,10 +25,15 @@ import {
 import { ToolbarButton } from './toolbar/toolbar-button';
 import { useCachedState } from './toolbar/use-cached-state';
 
-export type ToolbarTabValue = 'linter' | 'compatibility' | 'spam-assassin';
+export type ToolbarTabValue =
+  | 'linter'
+  | 'compatibility'
+  | 'spam-assassin'
+  | 'resend';
 
 export const useToolbarState = () => {
   const searchParams = useSearchParams();
+
   const activeTab = (searchParams.get('toolbar-panel') ?? undefined) as
     | ToolbarTabValue
     | undefined;
@@ -57,6 +66,8 @@ const ToolbarInner = ({
   const searchParams = useSearchParams();
   const router = useRouter();
 
+  const { hasSetupResendIntegration } = useToolbarContext();
+
   const { activeTab, toggled } = useToolbarState();
 
   const setActivePanelValue = (newValue: ToolbarTabValue | undefined) => {
@@ -155,6 +166,11 @@ const ToolbarInner = ({
                   Spam
                 </ToolbarButton>
               </Tabs.Trigger>
+              <Tabs.Trigger asChild value="resend">
+                <ToolbarButton active={activeTab === 'resend'}>
+                  Resend
+                </ToolbarButton>
+              </Tabs.Trigger>
             </LayoutGroup>
             <div className="flex gap-0.5 ml-auto">
               <ToolbarButton
@@ -166,15 +182,17 @@ const ToolbarInner = ({
                     'The Spam tab will look at the content and use a robust scoring framework to determine if the email is likely to be spam. Powered by SpamAssassin.') ||
                   (activeTab === 'compatibility' &&
                     'The Compatibility tab shows how well the HTML/CSS is supported across mail clients like Outlook, Gmail, etc. Powered by Can I Email.') ||
+                  (activeTab === 'resend' &&
+                    "The Resend tab allows you to upload your React Email's HTML using the Templates API. It does not yet upload with variables.") ||
                   'Info'
                 }
               >
                 <IconInfo size={24} />
               </ToolbarButton>
-              {isBuilding ? null : (
+              {isBuilding || activeTab === 'resend' ? null : (
                 <ToolbarButton
                   tooltip="Reload"
-                  disabled={lintLoading || spamLoading}
+                  disabled={lintLoading || spamLoading || compatibilityLoading}
                   onClick={async () => {
                     if (activeTab === undefined) {
                       setActivePanelValue('linter');
@@ -192,7 +210,7 @@ const ToolbarInner = ({
                     size={24}
                     className={cn({
                       'opacity-60 animate-spin-fast':
-                        lintLoading || spamLoading,
+                        lintLoading || spamLoading || compatibilityLoading,
                     })}
                   />
                 </ToolbarButton>
@@ -261,6 +279,22 @@ const ToolbarInner = ({
                 <SpamAssassin result={spamCheckingResult} />
               )}
             </Tabs.Content>
+            <Tabs.Content value="resend">
+              {hasSetupResendIntegration ? (
+                <ResendIntegration
+                  emailSlug={emailSlug}
+                  htmlMarkup={prettyMarkup}
+                />
+              ) : (
+                <SuccessWrapper>
+                  <SuccessTitle>Connect to Resend</SuccessTitle>
+                  <SuccessDescription>
+                    Run <CodeSnippet>email resend setup re_xxxxxx</CodeSnippet>{' '}
+                    to connect your Resend account and refresh.
+                  </SuccessDescription>
+                </SuccessWrapper>
+              )}
+            </Tabs.Content>
           </div>
         </div>
       </Tabs.Root>
@@ -326,11 +360,11 @@ interface ToolbarProps {
   serverCompatibilityResults: CompatibilityCheckingResult[] | undefined;
 }
 
-export const Toolbar = ({
+export function Toolbar({
   serverLintingRows,
   serverSpamCheckingResult,
   serverCompatibilityResults,
-}: ToolbarProps) => {
+}: ToolbarProps) {
   const { emailPath, emailSlug, renderedEmailMetadata } = usePreviewContext();
 
   if (renderedEmailMetadata === undefined) return null;
@@ -348,4 +382,4 @@ export const Toolbar = ({
       serverCompatibilityResults={serverCompatibilityResults}
     />
   );
-};
+}