@react-email/preview-server 4.2.11 → 4.3.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @react-email/preview-server
 
+## 4.3.0
+
+### Minor Changes
+
+- c0f6ec2: Added resize snapping, refined UI and improved presets
+
+## 4.2.12
+
 ## 4.2.11
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-email/preview-server",
-  "version": "4.2.11",
+  "version": "4.3.0",
   "description": "A live preview of your emails right in your browser.",
   "main": "./index.mjs",
   "dependencies": {
@@ -9,13 +9,13 @@
     "@babel/traverse": "7.27.0",
     "@lottiefiles/dotlottie-react": "0.13.3",
     "@radix-ui/colors": "3.0.0",
-    "@radix-ui/react-collapsible": "1.1.7",
-    "@radix-ui/react-dropdown-menu": "2.1.10",
-    "@radix-ui/react-popover": "1.1.10",
-    "@radix-ui/react-slot": "1.2.0",
-    "@radix-ui/react-tabs": "1.1.7",
-    "@radix-ui/react-toggle-group": "1.1.6",
-    "@radix-ui/react-tooltip": "1.2.3",
+    "@radix-ui/react-collapsible": "1.1.12",
+    "@radix-ui/react-dropdown-menu": "2.1.16",
+    "@radix-ui/react-popover": "1.1.15",
+    "@radix-ui/react-slot": "1.2.3",
+    "@radix-ui/react-tabs": "1.1.13",
+    "@radix-ui/react-toggle-group": "1.1.11",
+    "@radix-ui/react-tooltip": "1.2.8",
     "@types/node": "22.14.1",
     "@types/normalize-path": "3.0.2",
     "@types/react": "19.0.10",
@@ -23,8 +23,8 @@
     "@types/webpack": "5.28.5",
     "autoprefixer": "10.4.21",
     "clsx": "2.1.1",
-    "esbuild": "0.25.0",
-    "framer-motion": "12.23.12",
+    "esbuild": "0.25.10",
+    "framer-motion": "12.23.22",
     "json5": "2.2.3",
     "log-symbols": "4.1.0",
     "module-punycode": "npm:punycode@2.3.1",
@@ -35,7 +35,7 @@
     "prism-react-renderer": "2.4.1",
     "react": "19.0.0",
     "react-dom": "19.0.0",
-    "sharp": "0.34.1",
+    "sharp": "0.34.4",
     "socket.io-client": "4.8.1",
     "sonner": "2.0.3",
     "source-map-js": "1.2.1",
@@ -60,7 +60,7 @@
     "postcss": "8.5.3",
     "tailwindcss": "3.4.0",
     "typescript": "5.8.3",
-    "@react-email/components": "0.5.3"
+    "@react-email/components": "0.5.6"
   },
   "license": "MIT",
   "repository": {

package/readme.md

@@ -2,11 +2,10 @@
 <div align="center">A live preview of your emails right in your browser.</div>
 <br />
 <div align="center">
-<a href="https://react.email">Website</a> 
+<a href="https://react.email">Website</a>
 <span> · </span>
-<a href="https://github.com/resend/react-email">GitHub</a> 
-<span> · </span>
-<a href="https://react.email/discord">Discord</a>
+<a href="https://github.com/resend/react-email">GitHub</a>
+
 </div>
 
 This package is used to store the preview server, it is also published and versioned so that it can be installed when the [CLI](../react-email) is being used.

package/src/actions/email-validation/check-compatibility.ts

@@ -1,4 +1,5 @@
 'use server';
+
 import { parse } from '@babel/parser';
 import traverse from '@babel/traverse';
 import {

package/src/actions/get-email-path-from-slug.ts

@@ -1,10 +1,10 @@
 'use server';
+
 import fs from 'node:fs';
 import path from 'node:path';
 import { cache } from 'react';
 import { emailsDirectoryAbsolutePath } from '../app/env';
 
-// eslint-disable-next-line @typescript-eslint/require-await
 export const getEmailPathFromSlug = cache(async (slug: string) => {
   if (['.tsx', '.jsx', '.ts', '.js'].includes(path.extname(slug)))
     return path.join(emailsDirectoryAbsolutePath, slug);

package/src/actions/render-email-by-path.tsx

@@ -1,4 +1,5 @@
 'use server';
+
 import fs from 'node:fs';
 import path from 'node:path';
 import { styleText } from 'node:util';
@@ -40,9 +41,13 @@ export const renderEmailByPath = async (
   emailPath: string,
   invalidatingCache = false,
 ): Promise<EmailRenderingResult> => {
-  if (invalidatingCache) cache.delete(emailPath);
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  if (cache.has(emailPath)) return cache.get(emailPath)!;
+  if (invalidatingCache) {
+    cache.delete(emailPath);
+  }
+
+  if (cache.has(emailPath)) {
+    return cache.get(emailPath)!;
+  }
 
   const timeBeforeEmailRendered = performance.now();
 

package/src/app/env.ts

@@ -1,7 +1,3 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-/** ONLY ACCESSIBLE ON THE SERVER */
-export const emailsDirRelativePath = process.env.EMAILS_DIR_RELATIVE_PATH!;
-
 /** ONLY ACCESSIBLE ON THE SERVER */
 export const userProjectLocation = process.env.USER_PROJECT_LOCATION!;
 

package/src/app/layout.tsx

@@ -1,5 +1,6 @@
-import type { Metadata } from 'next';
 import './globals.css';
+
+import type { Metadata } from 'next';
 import { EmailsProvider } from '../contexts/emails';
 import { getEmailsDirectoryMetadata } from '../utils/get-emails-directory-metadata';
 import { emailsDirectoryAbsolutePath } from './env';
@@ -11,7 +12,11 @@ export const metadata: Metadata = {
 
 export const dynamic = 'force-dynamic';
 
-const RootLayout = async ({ children }: { children: React.ReactNode }) => {
+export default async function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
   const emailsDirectoryMetadata = await getEmailsDirectoryMetadata(
     emailsDirectoryAbsolutePath,
   );
@@ -38,6 +43,4 @@ const RootLayout = async ({ children }: { children: React.ReactNode }) => {
       </body>
     </html>
   );
-};
-
-export default RootLayout;
+}

package/src/app/page.tsx

@@ -7,7 +7,7 @@ import { Shell } from '../components/shell';
 import { emailsDirectoryAbsolutePath } from './env';
 import logo from './logo.png';
 
-const Home = () => {
+export default function Home() {
   const baseEmailsDirectoryName = path.basename(emailsDirectoryAbsolutePath);
 
   return (
@@ -41,6 +41,4 @@ const Home = () => {
       </div>
     </Shell>
   );
-};
-
-export default Home;
+}

package/src/app/preview/[...slug]/error-overlay.tsx

@@ -1,4 +1,5 @@
 'use client';
+
 import type { ErrorObject } from '../../../utils/types/error-object';
 
 interface ErrorOverlayProps {

package/src/app/preview/[...slug]/page.tsx

@@ -26,11 +26,11 @@ export interface PreviewParams {
   slug: string[];
 }
 
-const Page = async ({
+export default async function Page({
   params: paramsPromise,
 }: {
   params: Promise<PreviewParams>;
-}) => {
+}) {
   const params = await paramsPromise;
   // will come in here as segments of a relative path to the email
   // ex: ['authentication', 'verify-password.tsx']
@@ -141,7 +141,7 @@ This is most likely not an issue with the preview server. Maybe there was a typo
       </Shell>
     </PreviewProvider>
   );
-};
+}
 
 export async function generateMetadata({
   params,
@@ -152,5 +152,3 @@ export async function generateMetadata({
 
   return { title: `${path.basename(slug.join('/'))} — React Email` };
 }
-
-export default Page;

package/src/app/preview/[...slug]/preview.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import { use, useState } from 'react';
+import { useState } from 'react';
 import { flushSync } from 'react-dom';
 import { Toaster } from 'sonner';
 import { useDebouncedCallback } from 'use-debounce';
@@ -16,7 +16,7 @@ import { useToolbarState } from '../../../components/toolbar';
 import { Tooltip } from '../../../components/tooltip';
 import { ActiveViewToggleGroup } from '../../../components/topbar/active-view-toggle-group';
 import { ViewSizeControls } from '../../../components/topbar/view-size-controls';
-import { PreviewContext } from '../../../contexts/preview';
+import { usePreviewContext } from '../../../contexts/preview';
 import { useClampedState } from '../../../hooks/use-clamped-state';
 import { cn } from '../../../utils';
 import { ErrorOverlay } from './error-overlay';
@@ -26,7 +26,7 @@ interface PreviewProps extends React.ComponentProps<'div'> {
 }
 
 const Preview = ({ emailTitle, className, ...props }: PreviewProps) => {
-  const { renderingResult, renderedEmailMetadata } = use(PreviewContext)!;
+  const { renderingResult, renderedEmailMetadata } = usePreviewContext();
 
   const router = useRouter();
   const pathname = usePathname();
@@ -56,17 +56,17 @@ const Preview = ({ emailTitle, className, ...props }: PreviewProps) => {
 
   const [maxWidth, setMaxWidth] = useState(Number.POSITIVE_INFINITY);
   const [maxHeight, setMaxHeight] = useState(Number.POSITIVE_INFINITY);
-  const minWidth = 100;
-  const minHeight = 100;
+  const minWidth = 220;
+  const minHeight = minWidth * 1.6;
   const storedWidth = searchParams.get('width');
   const storedHeight = searchParams.get('height');
   const [width, setWidth] = useClampedState(
-    storedWidth ? Number.parseInt(storedWidth) : 600,
+    storedWidth ? Number.parseInt(storedWidth) : 1024,
     minWidth,
     maxWidth,
   );
   const [height, setHeight] = useClampedState(
-    storedHeight ? Number.parseInt(storedHeight) : 1024,
+    storedHeight ? Number.parseInt(storedHeight) : 600,
     minHeight,
     maxHeight,
   );
@@ -83,22 +83,26 @@ const Preview = ({ emailTitle, className, ...props }: PreviewProps) => {
   return (
     <>
       <Topbar emailTitle={emailTitle}>
-        <ViewSizeControls
-          setViewHeight={(height) => {
-            setHeight(height);
-            flushSync(() => {
-              handleSaveViewSize();
-            });
-          }}
-          setViewWidth={(width) => {
-            setWidth(width);
-            flushSync(() => {
-              handleSaveViewSize();
-            });
-          }}
-          viewHeight={height}
-          viewWidth={width}
-        />
+        {activeView === 'preview' && (
+          <ViewSizeControls
+            setViewHeight={(height) => {
+              setHeight(height);
+              flushSync(() => {
+                handleSaveViewSize();
+              });
+            }}
+            setViewWidth={(width) => {
+              setWidth(width);
+              flushSync(() => {
+                handleSaveViewSize();
+              });
+            }}
+            viewHeight={height}
+            viewWidth={width}
+            minWidth={minWidth}
+            minHeight={minHeight}
+          />
+        )}
         <ActiveViewToggleGroup
           activeView={activeView}
           setActiveView={handleViewChange}
@@ -113,7 +117,7 @@ const Preview = ({ emailTitle, className, ...props }: PreviewProps) => {
       <div
         {...props}
         className={cn(
-          'h-[calc(100%-3.5rem-2.375rem)] will-change-[height] flex p-4 transition-[height] duration-300',
+          'h-[calc(100%-3.5rem-2.375rem)] will-change-[height] flex p-4 transition-[height] duration-300 relative',
           activeView === 'preview' && 'bg-gray-200',
           toolbarToggled && 'h-[calc(100%-3.5rem-13rem)]',
           className,

package/src/components/resizable-wrapper.tsx

@@ -1,6 +1,13 @@
 import { Slot } from '@radix-ui/react-slot';
-import { type ComponentProps, useCallback, useEffect, useRef } from 'react';
+import {
+  type ComponentProps,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import { cn } from '../utils';
+import { VIEW_PRESETS } from './topbar/view-size-controls';
 
 type Direction = 'north' | 'south' | 'east' | 'west';
 
@@ -56,14 +63,17 @@ export const ResizableWrapper = ({
   ...rest
 }: ResizableWrapperProps) => {
   const resizableRef = useRef<HTMLElement>(null);
-
+  const [isResizing, setIsResizing] = useState(false);
   const mouseMoveListener = useRef<(event: MouseEvent) => void>(null);
+  const [direction, setDirection] = useState<Direction | null>(null);
 
   const handleStopResizing = useCallback(() => {
     if (mouseMoveListener.current) {
       document.removeEventListener('mousemove', mouseMoveListener.current);
     }
     document.removeEventListener('mouseup', handleStopResizing);
+    setIsResizing(false);
+    setDirection(null);
     onResizeEnd?.();
   }, []);
 
@@ -78,6 +88,38 @@ export const ResizableWrapper = ({
         const center = isHorizontal
           ? resizableBoundingRect.x + resizableBoundingRect.width / 2
           : resizableBoundingRect.y + resizableBoundingRect.height / 2;
+
+        const newPosition = Math.abs(mousePosition - center) * 2;
+
+        setIsResizing(true);
+        setDirection(direction);
+
+        const threshold = 12;
+
+        for (let i = 0; i < VIEW_PRESETS.length; i++) {
+          const preset = VIEW_PRESETS[i];
+
+          if (preset) {
+            if (
+              isHorizontal &&
+              newPosition > preset.dimensions.width - threshold &&
+              newPosition < preset.dimensions.width + threshold
+            ) {
+              onResize(preset.dimensions.width, direction);
+              return;
+            }
+
+            if (
+              !isHorizontal &&
+              newPosition > preset.dimensions.height - threshold &&
+              newPosition < preset.dimensions.height + threshold
+            ) {
+              onResize(preset.dimensions.height, direction);
+              return;
+            }
+          }
+        }
+
         onResize(Math.abs(mousePosition - center) * 2, direction);
       } else {
         handleStopResizing();
@@ -89,85 +131,142 @@ export const ResizableWrapper = ({
   };
 
   useEffect(() => {
-    if (!window.document) return;
+    if (!window.document) {
+      return;
+    }
 
     return () => {
       handleStopResizing();
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (
-    <div
-      {...rest}
-      className={cn('relative mx-auto my-auto box-content', rest.className)}
-    >
-      <div
-        aria-label="resize-west"
-        aria-valuenow={width}
-        aria-valuemin={minWidth}
-        aria-valuemax={maxWidth}
-        className="-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-2 cursor-w-resize p-2 [user-drag:none]"
-        onDragStart={(event) => event.preventDefault()}
-        draggable="false"
-        onMouseDown={() => {
-          handleStartResizing('west');
-        }}
-        role="slider"
-        tabIndex={0}
-      >
-        <div className="h-8 w-1 rounded-md bg-black/30" />
-      </div>
-      <div
-        aria-label="resize-east"
-        aria-valuenow={width}
-        aria-valuemin={minWidth}
-        aria-valuemax={maxWidth}
-        onDragStart={(event) => event.preventDefault()}
-        className="-translate-x-full -translate-y-1/2 absolute top-1/2 left-full cursor-e-resize p-2 [user-drag:none]"
-        draggable="false"
-        onMouseDown={() => {
-          handleStartResizing('east');
-        }}
-        role="slider"
-        tabIndex={0}
-      >
-        <div className="h-8 w-1 rounded-md bg-black/30" />
-      </div>
-      <div
-        aria-label="resize-north"
-        aria-valuenow={height}
-        aria-valuemin={minHeight}
-        aria-valuemax={maxHeight}
-        onDragStart={(event) => event.preventDefault()}
-        className="-translate-x-1/2 -translate-y-1/2 absolute top-0 left-1/2 cursor-n-resize p-2 [user-drag:none]"
-        draggable="false"
-        onMouseDown={() => {
-          handleStartResizing('north');
-        }}
-        role="slider"
-        tabIndex={0}
-      >
-        <div className="h-1 w-8 rounded-md bg-black/30" />
+    <>
+      <div className=" overflow-hidden absolute inset-0">
+        <div className="absolute mx-auto box-content -translate-x-1/2 -translate-y-1/2 left-1/2 top-1/2">
+          {VIEW_PRESETS.map((preset) => (
+            <div
+              key={preset.name}
+              className="-translate-x-1/2 -translate-y-1/2 absolute pointer-events-none select-none"
+              style={{
+                width: preset.dimensions.width,
+                height: preset.dimensions.height,
+              }}
+            >
+              {width === preset.dimensions.width &&
+                isResizing &&
+                (direction === 'east' || direction === 'west') && (
+                  <>
+                    <div className="absolute right-0 -top-[100vw] -bottom-[100vw] border-r-2 border-cyan-5" />
+                    <div className="absolute left-0 -top-[100vw] -bottom-[100vw] border-l-2 border-cyan-5" />
+                  </>
+                )}
+
+              {height === preset.dimensions.height &&
+                isResizing &&
+                (direction === 'north' || direction === 'south') && (
+                  <>
+                    <div className="absolute top-0 -left-[100vw] -right-[100vw] border-t-2 border-cyan-5" />
+                    <div className="absolute bottom-0 -left-[100vw] -right-[100vw] border-b-2 border-cyan-5" />
+                  </>
+                )}
+            </div>
+          ))}
+        </div>
       </div>
+
       <div
-        aria-label="resize-south"
-        aria-valuenow={height}
-        aria-valuemin={minHeight}
-        aria-valuemax={maxHeight}
-        onDragStart={(event) => event.preventDefault()}
-        className="-translate-x-1/2 -translate-y-1/2 absolute top-full left-1/2 cursor-s-resize p-2 [user-drag:none]"
-        draggable="false"
-        onMouseDown={() => {
-          handleStartResizing('south');
-        }}
-        role="slider"
-        tabIndex={0}
+        {...rest}
+        className={cn('relative mx-auto my-auto box-content', rest.className)}
       >
-        <div className="h-1 w-8 rounded-md bg-black/30" />
-      </div>
+        <div
+          aria-label="resize-west"
+          aria-valuenow={width}
+          aria-valuemin={minWidth}
+          aria-valuemax={maxWidth}
+          className="-translate-x-1/2 -translate-y-1/2 absolute top-1/2 -left-2 cursor-w-resize p-2 [user-drag:none]"
+          onDragStart={(event) => event.preventDefault()}
+          draggable="false"
+          onMouseDown={() => {
+            handleStartResizing('west');
+          }}
+          role="slider"
+          tabIndex={0}
+        >
+          <div
+            className={cn('h-8 w-1 rounded-md bg-black/50 transition-colors', {
+              'bg-black': direction === 'west',
+            })}
+          />
+        </div>
+        <div
+          aria-label="resize-east"
+          aria-valuenow={width}
+          aria-valuemin={minWidth}
+          aria-valuemax={maxWidth}
+          onDragStart={(event) => event.preventDefault()}
+          className="translate-x-1/2 -translate-y-1/2 absolute top-1/2 -right-2 cursor-e-resize p-2 [user-drag:none]"
+          draggable="false"
+          onMouseDown={() => {
+            handleStartResizing('east');
+          }}
+          role="slider"
+          tabIndex={0}
+        >
+          <div
+            className={cn('h-8 w-1 rounded-md bg-black/50 transition-colors', {
+              'bg-black': direction === 'east',
+            })}
+          />
+        </div>
+        <div
+          aria-label="resize-north"
+          aria-valuenow={height}
+          aria-valuemin={minHeight}
+          aria-valuemax={maxHeight}
+          onDragStart={(event) => event.preventDefault()}
+          className="-translate-x-1/2 -translate-y-1/2 absolute -top-2 left-1/2 cursor-n-resize p-2 [user-drag:none]"
+          draggable="false"
+          onMouseDown={() => {
+            handleStartResizing('north');
+          }}
+          role="slider"
+          tabIndex={0}
+        >
+          <div
+            className={cn('h-1 w-8 rounded-md bg-black/50 transition-colors', {
+              'bg-black': direction === 'north',
+            })}
+          />
+        </div>
+        <div
+          aria-label="resize-south"
+          aria-valuenow={height}
+          aria-valuemin={minHeight}
+          aria-valuemax={maxHeight}
+          onDragStart={(event) => event.preventDefault()}
+          className="-translate-x-1/2 translate-y-1/2 absolute -bottom-2 left-1/2 cursor-s-resize p-2 [user-drag:none]"
+          draggable="false"
+          onMouseDown={() => {
+            handleStartResizing('south');
+          }}
+          role="slider"
+          tabIndex={0}
+        >
+          <div
+            className={cn('h-1 w-8 rounded-md bg-black/50 transition-colors', {
+              'bg-black': direction === 'south',
+            })}
+          />
+        </div>
 
-      <Slot ref={resizableRef}>{children}</Slot>
-    </div>
+        <Slot
+          ref={resizableRef}
+          className={isResizing ? 'pointer-events-none select-none' : ''}
+        >
+          {children}
+        </Slot>
+      </div>
+    </>
   );
 };

package/src/components/toolbar.tsx

@@ -5,7 +5,7 @@ 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 { PreviewContext } from '../contexts/preview';
+import { usePreviewContext } from '../contexts/preview';
 import { cn } from '../utils';
 import { IconArrowDown } from './icons/icon-arrow-down';
 import { IconCheck } from './icons/icon-check';
@@ -332,8 +332,7 @@ export const Toolbar = ({
   serverSpamCheckingResult,
   serverCompatibilityResults,
 }: ToolbarProps) => {
-  const { emailPath, emailSlug, renderedEmailMetadata } =
-    React.use(PreviewContext)!;
+  const { emailPath, emailSlug, renderedEmailMetadata } = usePreviewContext();
 
   if (renderedEmailMetadata === undefined) return null;
   const { prettyMarkup, plainText, reactMarkup } = renderedEmailMetadata;

package/src/components/topbar/active-view-toggle-group.tsx

@@ -30,7 +30,7 @@ export const ActiveViewToggleGroup = ({
           <Tooltip.Trigger asChild>
             <div
               className={cn(
-                'px-3 py-2 transition ease-in-out duration-200 relative hover:text-slate-12',
+                'w-9 flex items-center py-2 transition ease-in-out duration-200 relative hover:text-slate-12',
                 {
                   'text-slate-11': activeView !== 'desktop',
                   'text-slate-12': activeView === 'desktop',
@@ -47,7 +47,7 @@ export const ActiveViewToggleGroup = ({
                   transition={tabTransition}
                 />
               )}
-              <IconMonitor />
+              <IconMonitor className="m-auto" />
             </div>
           </Tooltip.Trigger>
           <Tooltip.Content>Preview</Tooltip.Content>
@@ -58,7 +58,7 @@ export const ActiveViewToggleGroup = ({
           <Tooltip.Trigger asChild>
             <div
               className={cn(
-                'px-3 py-2 transition ease-in-out duration-200 relative hover:text-slate-12',
+                'w-9 flex  py-2 transition ease-in-out duration-200 relative hover:text-slate-12',
                 {
                   'text-slate-11': activeView !== 'source',
                   'text-slate-12': activeView === 'source',
@@ -75,7 +75,7 @@ export const ActiveViewToggleGroup = ({
                   transition={tabTransition}
                 />
               )}
-              <IconSource />
+              <IconSource className="m-auto" />
             </div>
           </Tooltip.Trigger>
           <Tooltip.Content>Code</Tooltip.Content>