feat(preview-server): templates api integration (#2634)

Co-authored-by: Gabriel Miranda <[email protected]>

Author: joaopcm

.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';