@react-email/preview-server 4.2.12 → 4.3.0

package/CHANGELOG.md

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-email/preview-server",
-  "version": "4.2.12",
+  "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.5"
+    "@react-email/components": "0.5.6"
   },
   "license": "MIT",
   "repository": {

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

@@ -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();
@@ -99,76 +141,132 @@ export const ResizableWrapper = ({
   }, []);
 
   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/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>