@react-email/ui 6.8.0 → 6.9.0

package/.next/trace

@@ -1 +1 @@
-[{"name":"generate-buildid","duration":221,"timestamp":139953394,"id":4,"parentId":1,"tags":{},"startTime":1783950783859,"traceId":"bec6b1bcdae73aeb"},{"name":"load-custom-routes","duration":401,"timestamp":139953727,"id":5,"parentId":1,"tags":{},"startTime":1783950783859,"traceId":"bec6b1bcdae73aeb"},{"name":"create-dist-dir","duration":847,"timestamp":139954157,"id":6,"parentId":1,"tags":{},"startTime":1783950783859,"traceId":"bec6b1bcdae73aeb"},{"name":"clean","duration":268,"timestamp":139955612,"id":7,"parentId":1,"tags":{},"startTime":1783950783861,"traceId":"bec6b1bcdae73aeb"},{"name":"discover-routes","duration":4599,"timestamp":139975246,"id":8,"parentId":1,"tags":{},"startTime":1783950783881,"traceId":"bec6b1bcdae73aeb"},{"name":"create-root-mapping","duration":81,"timestamp":139979893,"id":9,"parentId":1,"tags":{},"startTime":1783950783885,"traceId":"bec6b1bcdae73aeb"},{"name":"generate-route-types","duration":16467,"timestamp":139981793,"id":10,"parentId":1,"tags":{},"startTime":1783950783887,"traceId":"bec6b1bcdae73aeb"},{"name":"public-dir-conflict-check","duration":79,"timestamp":139998299,"id":11,"parentId":1,"tags":{},"startTime":1783950783904,"traceId":"bec6b1bcdae73aeb"},{"name":"generate-routes-manifest","duration":1910,"timestamp":139998455,"id":12,"parentId":1,"tags":{},"startTime":1783950783904,"traceId":"bec6b1bcdae73aeb"},{"name":"run-turbopack","duration":9858274,"timestamp":140004045,"id":14,"parentId":1,"tags":{},"startTime":1783950783909,"traceId":"bec6b1bcdae73aeb"},{"name":"turbopack-build-events","duration":58,"timestamp":140256679,"id":15,"parentId":1,"tags":{},"startTime":1783950784162,"traceId":"bec6b1bcdae73aeb"},{"name":"run-typescript","duration":7112640,"timestamp":149870742,"id":16,"parentId":1,"tags":{},"startTime":1783950793776,"traceId":"bec6b1bcdae73aeb"},{"name":"generate-required-server-files","duration":871,"timestamp":156983867,"id":18,"parentId":1,"tags":{},"startTime":1783950800889,"traceId":"bec6b1bcdae73aeb"},{"name":"check-static-error-page","duration":9070,"timestamp":157010537,"id":20,"parentId":19,"tags":{},"startTime":1783950800916,"traceId":"bec6b1bcdae73aeb"},{"name":"is-page-static","duration":256111,"timestamp":157020578,"id":27,"parentId":22,"tags":{},"startTime":1783950800926,"traceId":"bec6b1bcdae73aeb"},{"name":"check-page","duration":261206,"timestamp":157015576,"id":22,"parentId":19,"tags":{"page":"/_global-error"},"startTime":1783950800921,"traceId":"bec6b1bcdae73aeb"},{"name":"is-page-static","duration":326466,"timestamp":157026201,"id":29,"parentId":24,"tags":{},"startTime":1783950800931,"traceId":"bec6b1bcdae73aeb"},{"name":"check-page","duration":336880,"timestamp":157015838,"id":24,"parentId":19,"tags":{"page":"/"},"startTime":1783950800921,"traceId":"bec6b1bcdae73aeb"},{"name":"is-page-static","duration":378507,"timestamp":157020657,"id":28,"parentId":23,"tags":{},"startTime":1783950800926,"traceId":"bec6b1bcdae73aeb"},{"name":"check-page","duration":383487,"timestamp":157015741,"id":23,"parentId":19,"tags":{"page":"/favicon.ico"},"startTime":1783950800921,"traceId":"bec6b1bcdae73aeb"},{"name":"is-page-static","duration":388987,"timestamp":157020001,"id":26,"parentId":21,"tags":{},"startTime":1783950800925,"traceId":"bec6b1bcdae73aeb"},{"name":"check-page","duration":397612,"timestamp":157011454,"id":21,"parentId":19,"tags":{"page":"/_not-found"},"startTime":1783950800917,"traceId":"bec6b1bcdae73aeb"},{"name":"is-page-static","duration":614995,"timestamp":157028166,"id":30,"parentId":25,"tags":{},"startTime":1783950800933,"traceId":"bec6b1bcdae73aeb"},{"name":"check-page","duration":627325,"timestamp":157015905,"id":25,"parentId":19,"tags":{"page":"/preview/[...slug]"},"startTime":1783950800921,"traceId":"bec6b1bcdae73aeb"},{"name":"static-check","duration":634533,"timestamp":157008727,"id":19,"parentId":1,"tags":{},"startTime":1783950800914,"traceId":"bec6b1bcdae73aeb"},{"name":"write-routes-manifest","duration":290,"timestamp":157643884,"id":32,"parentId":1,"tags":{},"startTime":1783950801549,"traceId":"bec6b1bcdae73aeb"},{"name":"load-dotenv","duration":27,"timestamp":157650840,"id":35,"parentId":34,"tags":{},"startTime":1783950801556,"traceId":"bec6b1bcdae73aeb"},{"name":"run-export-path-map","duration":278,"timestamp":157652516,"id":36,"parentId":34,"tags":{},"startTime":1783950801558,"traceId":"bec6b1bcdae73aeb"},{"name":"next-export","duration":115233,"timestamp":157649987,"id":34,"parentId":1,"tags":{},"startTime":1783950801555,"traceId":"bec6b1bcdae73aeb"},{"name":"move-exported-app-global-error-","duration":397,"timestamp":157766261,"id":37,"parentId":33,"tags":{},"startTime":1783950801672,"traceId":"bec6b1bcdae73aeb"},{"name":"static-generation","duration":122084,"timestamp":157645868,"id":33,"parentId":1,"tags":{},"startTime":1783950801551,"traceId":"bec6b1bcdae73aeb"},{"name":"write-routes-manifest","duration":280,"timestamp":157768097,"id":38,"parentId":1,"tags":{},"startTime":1783950801673,"traceId":"bec6b1bcdae73aeb"},{"name":"print-tree-view","duration":2407,"timestamp":157774373,"id":39,"parentId":1,"tags":{},"startTime":1783950801680,"traceId":"bec6b1bcdae73aeb"},{"name":"write-route-bundle-stats","duration":4395,"timestamp":157776799,"id":40,"parentId":1,"tags":{},"startTime":1783950801682,"traceId":"bec6b1bcdae73aeb"},{"name":"telemetry-flush","duration":489125,"timestamp":157781207,"id":41,"parentId":1,"tags":{},"startTime":1783950801686,"traceId":"bec6b1bcdae73aeb"},{"name":"next-build","duration":18375952,"timestamp":139894407,"id":1,"tags":{"buildMode":"default","version":"16.2.6","bundler":"turbopack","has-custom-webpack-config":"false","use-build-worker":"true"},"startTime":1783950783800,"traceId":"bec6b1bcdae73aeb"}]
+[{"name":"generate-buildid","duration":270,"timestamp":258208200,"id":4,"parentId":1,"tags":{},"startTime":1784148191305,"traceId":"eaf7a751603db501"},{"name":"load-custom-routes","duration":353,"timestamp":258208592,"id":5,"parentId":1,"tags":{},"startTime":1784148191305,"traceId":"eaf7a751603db501"},{"name":"create-dist-dir","duration":859,"timestamp":258208975,"id":6,"parentId":1,"tags":{},"startTime":1784148191305,"traceId":"eaf7a751603db501"},{"name":"clean","duration":286,"timestamp":258210389,"id":7,"parentId":1,"tags":{},"startTime":1784148191307,"traceId":"eaf7a751603db501"},{"name":"discover-routes","duration":4422,"timestamp":258229762,"id":8,"parentId":1,"tags":{},"startTime":1784148191326,"traceId":"eaf7a751603db501"},{"name":"create-root-mapping","duration":49,"timestamp":258234223,"id":9,"parentId":1,"tags":{},"startTime":1784148191331,"traceId":"eaf7a751603db501"},{"name":"generate-route-types","duration":11878,"timestamp":258235806,"id":10,"parentId":1,"tags":{},"startTime":1784148191332,"traceId":"eaf7a751603db501"},{"name":"public-dir-conflict-check","duration":86,"timestamp":258247732,"id":11,"parentId":1,"tags":{},"startTime":1784148191344,"traceId":"eaf7a751603db501"},{"name":"generate-routes-manifest","duration":1932,"timestamp":258247906,"id":12,"parentId":1,"tags":{},"startTime":1784148191344,"traceId":"eaf7a751603db501"},{"name":"run-turbopack","duration":10172916,"timestamp":258253358,"id":14,"parentId":1,"tags":{},"startTime":1784148191350,"traceId":"eaf7a751603db501"},{"name":"turbopack-build-events","duration":66,"timestamp":258503061,"id":15,"parentId":1,"tags":{},"startTime":1784148191599,"traceId":"eaf7a751603db501"},{"name":"run-typescript","duration":7161506,"timestamp":268429324,"id":16,"parentId":1,"tags":{},"startTime":1784148201526,"traceId":"eaf7a751603db501"},{"name":"generate-required-server-files","duration":1008,"timestamp":275591420,"id":18,"parentId":1,"tags":{},"startTime":1784148208688,"traceId":"eaf7a751603db501"},{"name":"check-static-error-page","duration":7164,"timestamp":275618464,"id":20,"parentId":19,"tags":{},"startTime":1784148208715,"traceId":"eaf7a751603db501"},{"name":"is-page-static","duration":242700,"timestamp":275629594,"id":27,"parentId":22,"tags":{},"startTime":1784148208726,"traceId":"eaf7a751603db501"},{"name":"check-page","duration":248962,"timestamp":275623414,"id":22,"parentId":19,"tags":{"page":"/_global-error"},"startTime":1784148208720,"traceId":"eaf7a751603db501"},{"name":"is-page-static","duration":305982,"timestamp":275636131,"id":29,"parentId":24,"tags":{},"startTime":1784148208733,"traceId":"eaf7a751603db501"},{"name":"check-page","duration":318530,"timestamp":275623650,"id":24,"parentId":19,"tags":{"page":"/"},"startTime":1784148208720,"traceId":"eaf7a751603db501"},{"name":"is-page-static","duration":340523,"timestamp":275629333,"id":26,"parentId":21,"tags":{},"startTime":1784148208726,"traceId":"eaf7a751603db501"},{"name":"check-page","duration":350588,"timestamp":275619331,"id":21,"parentId":19,"tags":{"page":"/_not-found"},"startTime":1784148208716,"traceId":"eaf7a751603db501"},{"name":"is-page-static","duration":364896,"timestamp":275629652,"id":28,"parentId":23,"tags":{},"startTime":1784148208726,"traceId":"eaf7a751603db501"},{"name":"check-page","duration":375497,"timestamp":275623568,"id":23,"parentId":19,"tags":{"page":"/favicon.ico"},"startTime":1784148208720,"traceId":"eaf7a751603db501"},{"name":"is-page-static","duration":609740,"timestamp":275636190,"id":30,"parentId":25,"tags":{},"startTime":1784148208733,"traceId":"eaf7a751603db501"},{"name":"check-page","duration":622294,"timestamp":275623700,"id":25,"parentId":19,"tags":{"page":"/preview/[...slug]"},"startTime":1784148208720,"traceId":"eaf7a751603db501"},{"name":"static-check","duration":628364,"timestamp":275617670,"id":19,"parentId":1,"tags":{},"startTime":1784148208714,"traceId":"eaf7a751603db501"},{"name":"write-routes-manifest","duration":233,"timestamp":276246587,"id":32,"parentId":1,"tags":{},"startTime":1784148209343,"traceId":"eaf7a751603db501"},{"name":"load-dotenv","duration":27,"timestamp":276253142,"id":35,"parentId":34,"tags":{},"startTime":1784148209350,"traceId":"eaf7a751603db501"},{"name":"run-export-path-map","duration":261,"timestamp":276254701,"id":36,"parentId":34,"tags":{},"startTime":1784148209351,"traceId":"eaf7a751603db501"},{"name":"next-export","duration":108669,"timestamp":276252290,"id":34,"parentId":1,"tags":{},"startTime":1784148209349,"traceId":"eaf7a751603db501"},{"name":"move-exported-app-global-error-","duration":398,"timestamp":276361940,"id":37,"parentId":33,"tags":{},"startTime":1784148209458,"traceId":"eaf7a751603db501"},{"name":"static-generation","duration":115151,"timestamp":276248292,"id":33,"parentId":1,"tags":{},"startTime":1784148209345,"traceId":"eaf7a751603db501"},{"name":"write-routes-manifest","duration":201,"timestamp":276363554,"id":38,"parentId":1,"tags":{},"startTime":1784148209460,"traceId":"eaf7a751603db501"},{"name":"print-tree-view","duration":2251,"timestamp":276367689,"id":39,"parentId":1,"tags":{},"startTime":1784148209464,"traceId":"eaf7a751603db501"},{"name":"write-route-bundle-stats","duration":5341,"timestamp":276369954,"id":40,"parentId":1,"tags":{},"startTime":1784148209466,"traceId":"eaf7a751603db501"},{"name":"telemetry-flush","duration":490023,"timestamp":276375313,"id":41,"parentId":1,"tags":{},"startTime":1784148209472,"traceId":"eaf7a751603db501"},{"name":"next-build","duration":18713954,"timestamp":258151412,"id":1,"tags":{"buildMode":"default","version":"16.2.6","bundler":"turbopack","has-custom-webpack-config":"false","use-build-worker":"true"},"startTime":1784148191248,"traceId":"eaf7a751603db501"}]

package/.next/trace-build

@@ -1 +1 @@
-[{"name":"run-turbopack","duration":9858274,"timestamp":140004045,"id":14,"parentId":1,"tags":{},"startTime":1783950783909,"traceId":"bec6b1bcdae73aeb"},{"name":"turbopack-build-events","duration":58,"timestamp":140256679,"id":15,"parentId":1,"tags":{},"startTime":1783950784162,"traceId":"bec6b1bcdae73aeb"},{"name":"run-typescript","duration":7112640,"timestamp":149870742,"id":16,"parentId":1,"tags":{},"startTime":1783950793776,"traceId":"bec6b1bcdae73aeb"},{"name":"static-check","duration":634533,"timestamp":157008727,"id":19,"parentId":1,"tags":{},"startTime":1783950800914,"traceId":"bec6b1bcdae73aeb"},{"name":"static-generation","duration":122084,"timestamp":157645868,"id":33,"parentId":1,"tags":{},"startTime":1783950801551,"traceId":"bec6b1bcdae73aeb"},{"name":"telemetry-flush","duration":489125,"timestamp":157781207,"id":41,"parentId":1,"tags":{},"startTime":1783950801686,"traceId":"bec6b1bcdae73aeb"},{"name":"next-build","duration":18375952,"timestamp":139894407,"id":1,"tags":{"buildMode":"default","version":"16.2.6","bundler":"turbopack","has-custom-webpack-config":"false","use-build-worker":"true"},"startTime":1783950783800,"traceId":"bec6b1bcdae73aeb"}]
+[{"name":"run-turbopack","duration":10172916,"timestamp":258253358,"id":14,"parentId":1,"tags":{},"startTime":1784148191350,"traceId":"eaf7a751603db501"},{"name":"turbopack-build-events","duration":66,"timestamp":258503061,"id":15,"parentId":1,"tags":{},"startTime":1784148191599,"traceId":"eaf7a751603db501"},{"name":"run-typescript","duration":7161506,"timestamp":268429324,"id":16,"parentId":1,"tags":{},"startTime":1784148201526,"traceId":"eaf7a751603db501"},{"name":"static-check","duration":628364,"timestamp":275617670,"id":19,"parentId":1,"tags":{},"startTime":1784148208714,"traceId":"eaf7a751603db501"},{"name":"static-generation","duration":115151,"timestamp":276248292,"id":33,"parentId":1,"tags":{},"startTime":1784148209345,"traceId":"eaf7a751603db501"},{"name":"telemetry-flush","duration":490023,"timestamp":276375313,"id":41,"parentId":1,"tags":{},"startTime":1784148209472,"traceId":"eaf7a751603db501"},{"name":"next-build","duration":18713954,"timestamp":258151412,"id":1,"tags":{"buildMode":"default","version":"16.2.6","bundler":"turbopack","has-custom-webpack-config":"false","use-build-worker":"true"},"startTime":1784148191248,"traceId":"eaf7a751603db501"}]

package/.next/types/routes.d.ts

@@ -3,7 +3,7 @@
 
 type AppRoutes = "/" | "/preview/[...slug]"
 type PageRoutes = never
-type LayoutRoutes = "/"
+type LayoutRoutes = "/" | "/preview"
 type RedirectRoutes = never
 type RewriteRoutes = never
 type Routes = AppRoutes | PageRoutes | LayoutRoutes | RedirectRoutes | RewriteRoutes
@@ -11,6 +11,7 @@ type Routes = AppRoutes | PageRoutes | LayoutRoutes | RedirectRoutes | RewriteRo
 
 interface ParamMap {
   "/": {}
+  "/preview": {}
   "/preview/[...slug]": { "slug": string[]; }
 }
 
@@ -19,6 +20,7 @@ export type ParamsOf<Route extends Routes> = ParamMap[Route]
 
 interface LayoutSlotMap {
   "/": never
+  "/preview": never
 }
 
 

package/.next/types/validator.ts

@@ -68,3 +68,12 @@ type LayoutConfig<Route extends LayoutRoutes = LayoutRoutes> = {
   // @ts-ignore
   type __Unused = __Check
 }
+
+// Validate ../../src/app/preview/layout.tsx
+{
+  type __IsExpected<Specific extends LayoutConfig<"/preview">> = Specific
+  const handler = {} as typeof import("../../src/app/preview/layout.js")
+  type __Check = __IsExpected<typeof handler>
+  // @ts-ignore
+  type __Unused = __Check
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-email/ui",
-  "version": "6.8.0",
+  "version": "6.9.0",
   "description": "A live preview of your emails right in your browser.",
   "main": "./index.mjs",
   "files": [
@@ -73,7 +73,7 @@
     "typescript": "5.9.3",
     "use-debounce": "10.1.1",
     "zod": "4.3.6",
-    "react-email": "6.8.0"
+    "react-email": "6.9.0"
   },
   "license": "MIT",
   "repository": {

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

@@ -7,6 +7,7 @@ import { Toaster } from 'sonner';
 import { useDebouncedCallback } from 'use-debounce';
 import { Topbar } from '../../../components';
 import { CodeContainer } from '../../../components/code-container';
+import { PreviewPropsPanel } from '../../../components/preview-props-panel';
 import {
   makeIframeDocumentBubbleEvents,
   ResizableWrapper,
@@ -16,8 +17,10 @@ import { useToolbarState } from '../../../components/toolbar';
 import { Tooltip } from '../../../components/tooltip';
 import { ActiveViewToggleGroup } from '../../../components/topbar/active-view-toggle-group';
 import { EmulatedDarkModeToggle } from '../../../components/topbar/emulated-dark-mode-toggle';
+import { PropsPanelToggle } from '../../../components/topbar/props-panel-toggle';
 import { ViewSizeControls } from '../../../components/topbar/view-size-controls';
 import { usePreviewContext } from '../../../contexts/preview';
+import { usePropsPanel } from '../../../contexts/props-panel';
 import { useClampedState } from '../../../hooks/use-clamped-state';
 import { cn } from '../../../utils';
 import { inferEmailTitle } from '../../../utils/infer-email-title';
@@ -104,6 +107,9 @@ const Preview = ({ emailTitle, className, ...props }: PreviewProps) => {
 
   const { toggled: toolbarToggled } = useToolbarState();
 
+  const { open: propsPanelOpen, setOpen: handlePropsPanelChange } =
+    usePropsPanel();
+
   return (
     <>
       <Topbar emailTitle={emailTitle}>
@@ -137,6 +143,12 @@ const Preview = ({ emailTitle, className, ...props }: PreviewProps) => {
           activeView={activeView}
           setActiveView={handleViewChange}
         />
+        {hasRenderingMetadata && !isRawHtmlEmail ? (
+          <PropsPanelToggle
+            onChange={handlePropsPanelChange}
+            open={propsPanelOpen}
+          />
+        ) : null}
         {hasRenderingMetadata ? (
           <div className="flex justify-end">
             <Send
@@ -150,121 +162,131 @@ const Preview = ({ emailTitle, className, ...props }: PreviewProps) => {
       </Topbar>
 
       <div
-        {...props}
         className={cn(
-          'h-[calc(100%-3.5rem-2.375rem)] will-change-[height] flex p-4 transition-[height] duration-300 relative',
-          activeView === 'preview' && 'bg-gray-200',
-          activeView === 'preview' && isDarkModeEnabled && 'bg-gray-400',
+          'flex h-[calc(100%-3.5rem-2.375rem)] will-change-[height] transition-[height] duration-300',
           toolbarToggled && 'h-[calc(100%-3.5rem-13rem)]',
-          className,
         )}
-        ref={(element) => {
-          const observer = new ResizeObserver((entry) => {
-            const [elementEntry] = entry;
-            if (elementEntry) {
-              setMaxWidth(elementEntry.contentRect.width);
-              setMaxHeight(elementEntry.contentRect.height);
+      >
+        <div
+          {...props}
+          className={cn(
+            'relative flex min-w-0 grow p-4',
+            activeView === 'preview' && 'bg-gray-200',
+            activeView === 'preview' && isDarkModeEnabled && 'bg-gray-400',
+            className,
+          )}
+          ref={(element) => {
+            const observer = new ResizeObserver((entry) => {
+              const [elementEntry] = entry;
+              if (elementEntry) {
+                setMaxWidth(elementEntry.contentRect.width);
+                setMaxHeight(elementEntry.contentRect.height);
+              }
+            });
+
+            if (element) {
+              observer.observe(element);
             }
-          });
 
-          if (element) {
-            observer.observe(element);
-          }
+            return () => {
+              observer.disconnect();
+            };
+          }}
+        >
+          {hasErrors ? <ErrorOverlay error={renderingResult.error} /> : null}
 
-          return () => {
-            observer.disconnect();
-          };
-        }}
-      >
-        {hasErrors ? <ErrorOverlay error={renderingResult.error} /> : null}
-
-        {hasRenderingMetadata ? (
-          <>
-            {activeView === 'preview' && (
-              <ResizableWrapper
-                minHeight={minHeight}
-                minWidth={minWidth}
-                maxHeight={maxHeight}
-                maxWidth={maxWidth}
-                height={height}
-                onResizeEnd={() => {
-                  handleSaveViewSize();
-                }}
-                onResize={(value, direction) => {
-                  const isHorizontal =
-                    direction === 'east' || direction === 'west';
-                  if (isHorizontal) {
-                    setWidth(Math.round(value));
-                  } else {
-                    setHeight(Math.round(value));
-                  }
-                }}
-                width={width}
-              >
-                <EmailFrame
-                  className="max-h-full rounded-lg bg-white [color-scheme:auto]"
-                  darkMode={isDarkModeEnabled}
-                  markup={renderedEmailMetadata.markup}
-                  width={width}
+          {hasRenderingMetadata ? (
+            <>
+              {activeView === 'preview' && (
+                <ResizableWrapper
+                  minHeight={minHeight}
+                  minWidth={minWidth}
+                  maxHeight={maxHeight}
+                  maxWidth={maxWidth}
                   height={height}
-                  title={emailTitle}
-                  ref={(iframe) => {
-                    if (!iframe) return;
-
-                    return makeIframeDocumentBubbleEvents(iframe);
+                  onResizeEnd={() => {
+                    handleSaveViewSize();
+                  }}
+                  onResize={(value, direction) => {
+                    const isHorizontal =
+                      direction === 'east' || direction === 'west';
+                    if (isHorizontal) {
+                      setWidth(Math.round(value));
+                    } else {
+                      setHeight(Math.round(value));
+                    }
                   }}
-                />
-              </ResizableWrapper>
-            )}
+                  width={width}
+                >
+                  <EmailFrame
+                    className="max-h-full rounded-lg bg-white [color-scheme:auto]"
+                    darkMode={isDarkModeEnabled}
+                    markup={renderedEmailMetadata.markup}
+                    width={width}
+                    height={height}
+                    title={emailTitle}
+                    ref={(iframe) => {
+                      if (!iframe) return;
+
+                      return makeIframeDocumentBubbleEvents(iframe);
+                    }}
+                  />
+                </ResizableWrapper>
+              )}
 
-            {activeView === 'source' && (
-              <div className="h-full w-full">
-                <div className="m-auto h-full flex max-w-3xl p-6">
-                  <Tooltip.Provider>
-                    <CodeContainer
-                      activeLang={activeLang}
-                      basename={renderedEmailMetadata.basename}
-                      markups={
-                        isRawHtmlEmail
-                          ? [
-                              {
-                                language: 'html',
-                                extension: 'html',
-                                content: renderedEmailMetadata.prettyMarkup,
-                              },
-                              {
-                                language: 'markdown',
-                                extension: 'md',
-                                content: renderedEmailMetadata.plainText,
-                              },
-                            ]
-                          : [
-                              {
-                                language: 'tsx',
-                                extension: renderedEmailMetadata.extname,
-                                content: renderedEmailMetadata.reactMarkup,
-                              },
-                              {
-                                language: 'html',
-                                content: renderedEmailMetadata.prettyMarkup,
-                              },
-                              {
-                                language: 'markdown',
-                                extension: 'md',
-                                content: renderedEmailMetadata.plainText,
-                              },
-                            ]
-                      }
-                      setActiveLang={handleLangChange}
-                    />
-                  </Tooltip.Provider>
+              {activeView === 'source' && (
+                <div className="h-full w-full">
+                  <div className="m-auto h-full flex max-w-3xl p-6">
+                    <Tooltip.Provider>
+                      <CodeContainer
+                        activeLang={activeLang}
+                        basename={renderedEmailMetadata.basename}
+                        markups={
+                          isRawHtmlEmail
+                            ? [
+                                {
+                                  language: 'html',
+                                  extension: 'html',
+                                  content: renderedEmailMetadata.prettyMarkup,
+                                },
+                                {
+                                  language: 'markdown',
+                                  extension: 'md',
+                                  content: renderedEmailMetadata.plainText,
+                                },
+                              ]
+                            : [
+                                {
+                                  language: 'tsx',
+                                  extension: renderedEmailMetadata.extname,
+                                  content: renderedEmailMetadata.reactMarkup,
+                                },
+                                {
+                                  language: 'html',
+                                  content: renderedEmailMetadata.prettyMarkup,
+                                },
+                                {
+                                  language: 'markdown',
+                                  extension: 'md',
+                                  content: renderedEmailMetadata.plainText,
+                                },
+                              ]
+                        }
+                        setActiveLang={handleLangChange}
+                      />
+                    </Tooltip.Provider>
+                  </div>
                 </div>
-              </div>
-            )}
-          </>
-        ) : null}
+              )}
+            </>
+          ) : null}
 
-        <Toaster />
+          <Toaster />
+        </div>
+
+        {hasRenderingMetadata && !isRawHtmlEmail ? (
+          <PreviewPropsPanel open={propsPanelOpen} />
+        ) : null}
       </div>
     </>
   );

package/src/app/preview/layout.tsx

@@ -0,0 +1,9 @@
+import { PropsPanelProvider } from '../../contexts/props-panel';
+
+export default function PreviewLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <PropsPanelProvider>{children}</PropsPanelProvider>;
+}

package/src/components/code.tsx

@@ -13,7 +13,7 @@ interface CodeProps {
   language?: Language;
 }
 
-const theme = {
+export const codeTheme = {
   plain: {
     color: '#EDEDEF',
     fontSize: 13,
@@ -93,7 +93,7 @@ export const Code: React.FC<Readonly<CodeProps>> = ({
   const value = children.trim();
 
   return (
-    <Highlight code={value} language={language} theme={theme}>
+    <Highlight code={value} language={language} theme={codeTheme}>
       {({ tokens, getLineProps, getTokenProps }) => (
         <>
           <div

package/src/components/icons/icon-panel-right.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import type { IconElement, IconProps } from './icon-base';
+import { IconBase } from './icon-base';
+
+export const IconPanelRight = React.forwardRef<
+  IconElement,
+  Readonly<IconProps>
+>(({ ...props }, forwardedRef) => (
+  <IconBase ref={forwardedRef} {...props}>
+    <path
+      clipRule="evenodd"
+      d="M5 2.25H19C20.5188 2.25 21.75 3.48122 21.75 5V19C21.75 20.5188 20.5188 21.75 19 21.75L5 21.75C3.48122 21.75 2.25 20.5188 2.25 19L2.25 5C2.25 3.48122 3.48122 2.25 5 2.25ZM5 20.25C4.30964 20.25 3.75 19.6904 3.75 19L3.75 5C3.75 4.30964 4.30964 3.75 5 3.75L14.25 3.75L14.25 20.25L5 20.25ZM15.75 20.25L15.75 3.75L19 3.75C19.6904 3.75 20.25 4.30965 20.25 5L20.25 19C20.25 19.6904 19.6904 20.25 19 20.25H15.75Z"
+      fill="currentColor"
+      fillRule="evenodd"
+    />
+  </IconBase>
+));
+
+IconPanelRight.displayName = 'IconPanelRight';

package/src/components/json-editor.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import { Highlight } from 'prism-react-renderer';
+import { cn } from '../utils';
+import { codeTheme } from './code';
+
+interface JsonEditorProps {
+  value: string;
+  onChange: (value: string) => void;
+  disabled?: boolean;
+  className?: string;
+  'aria-label': string;
+  'aria-invalid'?: boolean;
+}
+
+// Text metrics must match between the highlighted <pre> and the transparent
+// <textarea> on top of it, or the caret drifts from the characters.
+const sharedTextClasses =
+  'whitespace-pre-wrap break-words p-2 text-[13px] leading-5 font-[MonoLisa,Menlo,monospace]';
+
+/**
+ * Syntax-highlighted JSON editing surface: a highlighted render with an
+ * invisible textarea overlaid, so it looks like the source view but types
+ * like a plain input.
+ */
+export const JsonEditor = ({
+  value,
+  onChange,
+  disabled = false,
+  className,
+  ...ariaProps
+}: JsonEditorProps) => {
+  return (
+    <div
+      className={cn(
+        'relative min-h-40 rounded-md border border-slate-6 transition-colors',
+        'focus-within:border-slate-8',
+        disabled && 'opacity-60',
+        className,
+      )}
+    >
+      <Highlight code={value} language="json" theme={codeTheme}>
+        {({ tokens, getLineProps, getTokenProps }) => (
+          <pre aria-hidden className={sharedTextClasses}>
+            {tokens.map((line, lineIndex) => (
+              <div {...getLineProps({ line })} key={lineIndex}>
+                {line.map((token, tokenIndex) => (
+                  <span {...getTokenProps({ token })} key={tokenIndex} />
+                ))}
+                {line.length === 1 && line[0]?.empty ? '​' : null}
+              </div>
+            ))}
+          </pre>
+        )}
+      </Highlight>
+      <textarea
+        {...ariaProps}
+        className={cn(
+          sharedTextClasses,
+          'absolute inset-0 h-full w-full resize-none overflow-hidden bg-transparent text-transparent caret-slate-12 outline-none',
+        )}
+        disabled={disabled}
+        onChange={(event) => {
+          onChange(event.currentTarget.value);
+        }}
+        spellCheck={false}
+        value={value}
+      />
+    </div>
+  );
+};

package/src/components/preview-props-editor.tsx

@@ -0,0 +1,101 @@
+'use client';
+
+import * as React from 'react';
+import { useDebouncedCallback } from 'use-debounce';
+import { isBuilding } from '../app/env';
+import { usePreviewContext } from '../contexts/preview';
+import { cn } from '../utils';
+import { JsonEditor } from './json-editor';
+
+export const PreviewPropsEditor = () => {
+  const {
+    renderedEmailMetadata,
+    previewPropsOverride,
+    setPreviewPropsOverride,
+  } = usePreviewContext();
+
+  const renderedPropsJson = JSON.stringify(
+    renderedEmailMetadata?.previewProps ?? {},
+    null,
+    2,
+  );
+
+  // The applied override is the source of truth for what renders; the draft
+  // only preserves the user's raw text, which can be momentarily invalid
+  // JSON or formatted differently than the applied value.
+  const [draft, setDraft] = React.useState<string | undefined>(undefined);
+  const [parseError, setParseError] = React.useState<string | undefined>(
+    undefined,
+  );
+
+  const hasOverride = previewPropsOverride !== undefined;
+
+  // Applying is debounced because every applied value costs a server render:
+  // per-keystroke applies queue up behind each other and permanently cache
+  // every intermediate state.
+  const applyValue = useDebouncedCallback((newValue: string) => {
+    try {
+      const parsed = JSON.parse(newValue) as unknown;
+      if (
+        parsed === null ||
+        typeof parsed !== 'object' ||
+        Array.isArray(parsed)
+      ) {
+        setParseError('Props must be a JSON object');
+        return;
+      }
+      setParseError(undefined);
+      setPreviewPropsOverride(parsed as Record<string, unknown>);
+    } catch (exception) {
+      setParseError((exception as Error).message);
+    }
+  }, 400);
+
+  const handleChange = (newValue: string) => {
+    setDraft(newValue);
+    applyValue(newValue);
+  };
+
+  return (
+    <div className="flex h-full flex-col gap-3">
+      <div className="flex items-center justify-between gap-3">
+        {isBuilding ? (
+          <p className="text-slate-11">
+            Read-only. This preview was rendered at build time.
+          </p>
+        ) : (
+          <button
+            className={cn(
+              'ml-auto shrink-0 rounded-md border border-slate-6 px-2 py-1 text-slate-11 transition-colors',
+              'hover:border-slate-8 hover:text-slate-12',
+              'disabled:opacity-40 disabled:hover:border-slate-6 disabled:hover:text-slate-11',
+            )}
+            disabled={!hasOverride && draft === undefined}
+            onClick={() => {
+              applyValue.cancel();
+              setDraft(undefined);
+              setParseError(undefined);
+              setPreviewPropsOverride(undefined);
+            }}
+            type="button"
+          >
+            Reset to defaults
+          </button>
+        )}
+      </div>
+      <JsonEditor
+        aria-invalid={parseError !== undefined}
+        aria-label="Preview props JSON"
+        className={cn(
+          parseError !== undefined && 'border-red-9 focus-within:border-red-9',
+        )}
+        disabled={isBuilding}
+        onChange={handleChange}
+        value={draft ?? renderedPropsJson}
+      />
+      {parseError !== undefined ? (
+        <p className="pb-3 text-red-11">{parseError}</p>
+      ) : null}
+    </div>
+  );
+};

package/src/components/preview-props-panel.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import { usePreviewContext } from '../contexts/preview';
+import { usePropsPanel } from '../contexts/props-panel';
+import { cn } from '../utils';
+import { PreviewPropsEditor } from './preview-props-editor';
+
+export const PreviewPropsPanel = ({ open }: { open: boolean }) => {
+  const { animated } = usePropsPanel();
+  const { emailSlug } = usePreviewContext();
+
+  return (
+    <aside
+      className={cn(
+        'shrink-0 overflow-hidden border-l border-slate-6',
+        animated && 'transition-[width] duration-200 will-change-[width]',
+        open ? 'w-72' : 'w-0 border-l-0',
+      )}
+      inert={!open}
+    >
+      <div className="flex h-full w-72 flex-col">
+        <div className="flex h-10 shrink-0 items-center border-b border-slate-6 px-4 font-medium text-slate-12 text-xs">
+          Props
+        </div>
+        <div className="grow overflow-y-auto px-4 pt-3 text-slate-11 text-xs">
+          <PreviewPropsEditor key={emailSlug} />
+        </div>
+      </div>
+    </aside>
+  );
+};