Email preview improvements

N2D4 · N2D4 · commit 7fc5334cff47 · 2025-07-29T01:21:39.000-07:00
diff --git a/apps/dashboard/src/components/email-preview.tsx b/apps/dashboard/src/components/email-preview.tsx
@@ -7,29 +7,29 @@ import ResizableContainer from './resizable-container';
 
 class EmailPreviewErrorBoundary extends Component<
   { children: ReactNode },
-  { hasError: boolean }
+  { error: KnownErrors["EmailRenderingError"] | null }
 > {
   constructor(props: { children: ReactNode }) {
     super(props);
-    this.state = { hasError: false };
+    this.state = { error: null };
   }
 
   static getDerivedStateFromError(error: Error) {
     if (error instanceof KnownErrors.EmailRenderingError) {
-      return { hasError: true };
+      return { error: error as KnownErrors["EmailRenderingError"] };
     }
     throw error;
   }
 
   render() {
-    if (this.state.hasError) {
+    if (this.state.error) {
       return (
         <div className="flex flex-col items-center p-4 h-full justify-center">
           <Typography type="h3" className="mb-2" variant="destructive">
             Email Rendering Error
           </Typography>
-          <Typography variant="secondary">
-            Please check your theme / template source code.
+          <Typography variant="secondary" className="whitespace-pre-wrap">
+            {this.state.error.message}
           </Typography>
         </div>
       );
diff --git a/packages/stack-shared/src/helpers/emails.ts b/packages/stack-shared/src/helpers/emails.ts
@@ -1,31 +1,46 @@
-export const previewTemplateSource = `
+import { deindent } from "../utils/strings";
+
+export const previewTemplateSource = deindent`
+  import { Heading, Section, Button, Link, Column } from "@react-email/components";
   export const variablesSchema = v => v;
   export function EmailTemplate() {
-    return (
-      <div>
-      <h2 className="mb-4 text-2xl font-bold">
+    return <>
+      <Heading as="h2" className="mb-4 text-2xl font-bold">
         Header text
-      </h2>
-      <p className="mb-4">
+      </Heading>
+      <Section className="mb-4">
         Body text content with some additional information.
-        </p>
-      </div>
-    );
+      </Section>
+      <Row className="mb-4">
+        <Column>
+          <Button href="https://example.com">
+            A button
+          </Button>
+        </Column>
+        <Column>
+          <Link href="https://example.com">
+            A link
+          </Link>
+        </Column>
+      </Row>
+    </>;
   }
 `;
 
-export const emptyEmailTheme = `import { Html, Tailwind, Body } from '@react-email/components';
-export function EmailTheme({ children }: { children: React.ReactNode }) {
-  return (
-    <Html>
-      <Tailwind>
-        <Body>
-          {children}
-        </Body>
-      </Tailwind>
-    </Html>
-  );
-}`;
+export const emptyEmailTheme = deindent`
+  import { Html, Tailwind, Body } from '@react-email/components';
+  export function EmailTheme({ children }: { children: React.ReactNode }) {
+    return (
+      <Html>
+        <Tailwind>
+          <Body>
+            {children}
+          </Body>
+        </Tailwind>
+      </Html>
+    );
+  }
+`;
 
 export const LightEmailTheme = `import { Html, Head, Tailwind, Body, Container } from '@react-email/components';
 
