save width and height on the search params

packages/react-email/package.json

@@ -18,7 +18,10 @@
     "url": "https://github.com/resend/react-email.git",
     "directory": "packages/react-email"
   },
-  "keywords": ["react", "email"],
+  "keywords": [
+    "react",
+    "email"
+  ],
   "engines": {
     "node": ">=18.0.0"
   },
@@ -83,6 +86,7 @@
     "tsup": "7.2.0",
     "tsx": "4.9.0",
     "typescript": "5.1.6",
+    "use-debounce": "10.0.4",
     "vitest": "1.1.3"
   }
 }

packages/react-email/src/app/preview/[...slug]/preview.tsx

@@ -2,6 +2,7 @@
 
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { Toaster } from 'sonner';
+import { useDebouncedCallback } from 'use-debounce';
 import type { EmailRenderingResult } from '../../../actions/render-email-by-path';
 import { CodeContainer } from '../../../components/code-container';
 import {
@@ -15,6 +16,7 @@ import { useEmailRenderingResult } from '../../../hooks/use-email-rendering-resu
 import { useHotreload } from '../../../hooks/use-hot-reload';
 import { useRenderingMetadata } from '../../../hooks/use-rendering-metadata';
 import { RenderingError } from './rendering-error';
+import { flushSync } from 'react-dom';
 
 interface PreviewProps {
   slug: string;
@@ -83,22 +85,45 @@ const Preview = ({
   let maxHeight = Number.POSITIVE_INFINITY;
   const minWidth = 350;
   const minHeight = 600;
-  const [width, setWidth] = useClampedState(600, 350, Number.POSITIVE_INFINITY);
+  const storedWidth = searchParams.get('width');
+  const storedHeight = searchParams.get('height');
+  const [width, setWidth] = useClampedState(
+    storedWidth ? Number.parseInt(storedWidth) : 600,
+    350,
+    Number.POSITIVE_INFINITY,
+  );
   const [height, setHeight] = useClampedState(
-    1024,
+    storedHeight ? Number.parseInt(storedHeight) : 1024,
     600,
     Number.POSITIVE_INFINITY,
   );
 
+  const handleSaveViewSize = useDebouncedCallback(() => {
+    const params = new URLSearchParams(searchParams);
+    params.set('width', width.toString());
+    params.set('height', height.toString());
+    router.push(`${pathname}?${params.toString()}`);
+  }, 300);
+
   return (
     <Shell
       activeView={activeView}
       currentEmailOpenSlug={slug}
       markup={renderedEmailMetadata?.markup}
       pathSeparator={pathSeparator}
       setActiveView={handleViewChange}
-      setViewHeight={setHeight}
-      setViewWidth={setWidth}
+      setViewHeight={(height) => {
+        setHeight(height);
+        flushSync(() => {
+          handleSaveViewSize();
+        });
+      }}
+      setViewWidth={(width) => {
+        setWidth(width);
+        flushSync(() => {
+          handleSaveViewSize();
+        });
+      }}
       viewHeight={height}
       viewWidth={width}
     >
@@ -125,6 +150,9 @@ const Preview = ({
                 maxHeight={maxHeight}
                 maxWidth={maxWidth}
                 height={height}
+                onResizeEnd={() => {
+                  handleSaveViewSize();
+                }}
                 onResize={(difference, direction) => {
                   switch (direction) {
                     case 'north':

packages/react-email/src/components/resizable-wrapper.tsx

@@ -12,6 +12,7 @@ interface ResizableWarpperProps {
   minHeight: number;
 
   onResize: (difference: number, direction: Direction) => void;
+  onResizeEnd?: () => void;
 
   children: React.ReactNode;
 }
@@ -35,6 +36,7 @@ export const ResizableWarpper = ({
   width,
   height,
   onResize,
+  onResizeEnd,
   children,
 
   maxHeight,
@@ -49,6 +51,7 @@ export const ResizableWarpper = ({
       document.removeEventListener('mousemove', mouseMoveListener);
     }
     document.removeEventListener('mouseup', handleStopResizing);
+    onResizeEnd?.();
   };
 
   const handleStartResizing = (direction: Direction) => {