diff --git a/.changeset/props-editor-redesign.md b/.changeset/props-editor-redesign.md
new file mode 100644
index 0000000000..583c6d8f08
--- /dev/null
+++ b/.changeset/props-editor-redesign.md
@@ -0,0 +1,5 @@
+---
+'@react-email/ui': minor
+---
+
+The preview props editor now lives in a collapsible panel beside the preview, with a syntax-highlighted JSON editor. Static builds show the props read-only.
diff --git a/packages/ui/src/app/preview/[...slug]/preview.tsx b/packages/ui/src/app/preview/[...slug]/preview.tsx
index 645fdba089..3eb78e4154 100644
--- a/packages/ui/src/app/preview/[...slug]/preview.tsx
+++ b/packages/ui/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>
     </>
   );
diff --git a/packages/ui/src/app/preview/layout.tsx b/packages/ui/src/app/preview/layout.tsx
new file mode 100644
index 0000000000..f9739488e7
--- /dev/null
+++ b/packages/ui/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>;
+}
diff --git a/packages/ui/src/components/code.tsx b/packages/ui/src/components/code.tsx
index d512a1571e..2fd14760f2 100644
--- a/packages/ui/src/components/code.tsx
+++ b/packages/ui/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
diff --git a/packages/ui/src/components/icons/icon-panel-right.tsx b/packages/ui/src/components/icons/icon-panel-right.tsx
new file mode 100644
index 0000000000..93c8eec6eb
--- /dev/null
+++ b/packages/ui/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';
diff --git a/packages/ui/src/components/json-editor.tsx b/packages/ui/src/components/json-editor.tsx
new file mode 100644
index 0000000000..3c10155617
--- /dev/null
+++ b/packages/ui/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>
+  );
+};
diff --git a/packages/ui/src/components/preview-props-editor.tsx b/packages/ui/src/components/preview-props-editor.tsx
new file mode 100644
index 0000000000..18bbc4f2ac
--- /dev/null
+++ b/packages/ui/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>
+  );
+};
diff --git a/packages/ui/src/components/preview-props-panel.tsx b/packages/ui/src/components/preview-props-panel.tsx
new file mode 100644
index 0000000000..c6868a95f8
--- /dev/null
+++ b/packages/ui/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>
+  );
+};
diff --git a/packages/ui/src/components/toolbar.tsx b/packages/ui/src/components/toolbar.tsx
index 07928af9af..65d496ad9f 100644
--- a/packages/ui/src/components/toolbar.tsx
+++ b/packages/ui/src/components/toolbar.tsx
@@ -22,7 +22,6 @@ import { IconReload } from './icons/icon-reload';
 import { Compatibility, useCompatibility } from './toolbar/compatibility';
 import { CopyForAI } from './toolbar/copy-for-ai';
 import { Linter, type LintingRow, useLinter } from './toolbar/linter';
-import { PreviewPropsEditor } from './toolbar/preview-props-editor';
 import { ResendIntegration } from './toolbar/resend';
 import {
   SpamAssassin,
@@ -31,19 +30,20 @@ import {
 } from './toolbar/spam-assassin';
 import { ToolbarButton } from './toolbar/toolbar-button';
 
-export type ToolbarTabValue =
-  | 'linter'
-  | 'compatibility'
-  | 'spam-assassin'
-  | 'props'
-  | 'resend';
+const toolbarTabValues = [
+  'linter',
+  'compatibility',
+  'spam-assassin',
+  'resend',
+] as const;
+
+export type ToolbarTabValue = (typeof toolbarTabValues)[number];
 
 export const useToolbarState = () => {
   const searchParams = useSearchParams();
 
-  const activeTab = (searchParams.get('toolbar-panel') ?? undefined) as
-    | ToolbarTabValue
-    | undefined;
+  const param = searchParams.get('toolbar-panel');
+  const activeTab = toolbarTabValues.find((value) => value === param);
 
   return {
     activeTab,
@@ -172,8 +172,6 @@ const ToolbarInner = ({
       'The Spam tab will look at the content and use a robust scoring framework to determine if the email is likely to be spam. Powered by SpamAssassin.') ||
     (activeTab === 'compatibility' &&
       'The Compatibility tab shows how well the HTML/CSS is supported across mail clients like Outlook, Gmail, etc. Powered by Can I Email.') ||
-    (activeTab === 'props' &&
-      'The Props tab lets you edit the props the preview renders with, to try out different content without changing the template.') ||
     (activeTab === 'resend' &&
       'The Resend tab allows you to upload your React Email code using the Resend Templates API.') ||
     'Info';
@@ -182,7 +180,6 @@ const ToolbarInner = ({
     linter: 'Linter',
     compatibility: 'Compatibility',
     'spam-assassin': 'Spam',
-    props: 'Props',
     resend: 'Resend',
   };
   const availablePanels: { value: ToolbarTabValue; label: string }[] = [
@@ -193,9 +190,6 @@ const ToolbarInner = ({
           { value: 'compatibility' as const, label: panelLabels.compatibility },
         ]),
     { value: 'spam-assassin', label: panelLabels['spam-assassin'] },
-    ...(isRawHtmlEmail || isBuilding
-      ? []
-      : [{ value: 'props' as const, label: panelLabels.props }]),
     { value: 'resend', label: panelLabels.resend },
   ];
   // The label must reflect the URL-selected panel even when that panel is not
@@ -285,13 +279,6 @@ const ToolbarInner = ({
                     Spam
                   </ToolbarButton>
                 </Tabs.Trigger>
-                {isRawHtmlEmail || isBuilding ? null : (
-                  <Tabs.Trigger asChild value="props">
-                    <ToolbarButton active={activeTab === 'props'}>
-                      Props
-                    </ToolbarButton>
-                  </Tabs.Trigger>
-                )}
                 <Tabs.Trigger asChild value="resend">
                   <ToolbarButton active={activeTab === 'resend'}>
                     Resend
@@ -412,9 +399,7 @@ const ToolbarInner = ({
                   </Popover.Content>
                 </Popover.Portal>
               </Popover.Root>
-              {isBuilding ||
-              activeTab === 'resend' ||
-              activeTab === 'props' ? null : (
+              {isBuilding || activeTab === 'resend' ? null : (
                 <ToolbarButton
                   tooltip="Reload"
                   disabled={lintLoading || spamLoading || compatibilityLoading}
@@ -516,11 +501,6 @@ const ToolbarInner = ({
                 <SpamAssassin result={spamCheckingResult} />
               )}
             </Tabs.Content>
-            {isRawHtmlEmail || isBuilding ? null : (
-              <Tabs.Content className="h-full" value="props">
-                <PreviewPropsEditor />
-              </Tabs.Content>
-            )}
             <Tabs.Content value="resend">
               {hasSetupResendIntegration ? (
                 <ResendIntegration
diff --git a/packages/ui/src/components/toolbar/copy-for-ai.tsx b/packages/ui/src/components/toolbar/copy-for-ai.tsx
index b138204b46..461a3d6b38 100644
--- a/packages/ui/src/components/toolbar/copy-for-ai.tsx
+++ b/packages/ui/src/components/toolbar/copy-for-ai.tsx
@@ -16,7 +16,6 @@ type ActiveTab =
   | 'linter'
   | 'compatibility'
   | 'spam-assassin'
-  | 'props'
   | 'resend'
   | undefined;
 
diff --git a/packages/ui/src/components/toolbar/preview-props-editor.tsx b/packages/ui/src/components/toolbar/preview-props-editor.tsx
deleted file mode 100644
index 6a40512ff1..0000000000
--- a/packages/ui/src/components/toolbar/preview-props-editor.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { useDebouncedCallback } from 'use-debounce';
-import { usePreviewContext } from '../../contexts/preview';
-import { cn } from '../../utils';
-
-/**
- * JSON editor for the props the preview renders with. Edits apply live and
- * only affect the preview; the template's `PreviewProps` are not modified.
- */
-export const PreviewPropsEditor = () => {
-  const {
-    renderedEmailMetadata,
-    previewPropsOverride,
-    setPreviewPropsOverride,
-  } = usePreviewContext();
-
-  const renderedPropsJson = JSON.stringify(
-    renderedEmailMetadata?.previewProps ?? {},
-    null,
-    2,
-  );
-
-  const [value, setValue] = React.useState(renderedPropsJson);
-  const [parseError, setParseError] = React.useState<string | undefined>(
-    undefined,
-  );
-
-  const hasOverride = previewPropsOverride !== undefined;
-
-  // Without an override active, the rendered props follow the template file
-  // (initial load, hot reload, reset), so the editor mirrors them.
-  React.useEffect(() => {
-    if (!hasOverride) {
-      setValue(renderedPropsJson);
-      setParseError(undefined);
-    }
-  }, [hasOverride, renderedPropsJson]);
-
-  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);
-
-  return (
-    <div className="flex h-full flex-col gap-2 pb-4">
-      <div className="flex items-center justify-between gap-4">
-        <p className="text-slate-11">
-          Edit the JSON props this preview renders with. Changes apply live and
-          do not modify the template&apos;s <code>PreviewProps</code>.
-        </p>
-        <button
-          className={cn(
-            '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}
-          onClick={() => {
-            applyValue.cancel();
-            setPreviewPropsOverride(undefined);
-          }}
-          type="button"
-        >
-          Reset to defaults
-        </button>
-      </div>
-      <textarea
-        aria-invalid={parseError !== undefined}
-        aria-label="Preview props JSON"
-        className={cn(
-          'grow resize-none rounded-md border border-slate-6 bg-transparent p-2 font-mono text-xs text-slate-12 outline-none',
-          'focus:border-slate-8',
-          parseError !== undefined && 'border-red-9 focus:border-red-9',
-        )}
-        onChange={(event) => {
-          setValue(event.currentTarget.value);
-          applyValue(event.currentTarget.value);
-        }}
-        spellCheck={false}
-        value={value}
-      />
-      {parseError !== undefined ? (
-        <p className="text-red-11">{parseError}</p>
-      ) : null}
-    </div>
-  );
-};
diff --git a/packages/ui/src/components/topbar/props-panel-toggle.tsx b/packages/ui/src/components/topbar/props-panel-toggle.tsx
new file mode 100644
index 0000000000..7cf2fbfd0e
--- /dev/null
+++ b/packages/ui/src/components/topbar/props-panel-toggle.tsx
@@ -0,0 +1,31 @@
+import * as Toggle from '@radix-ui/react-toggle';
+import { cn } from '../../utils';
+import { IconPanelRight } from '../icons/icon-panel-right';
+import { Tooltip } from '../tooltip';
+
+interface PropsPanelToggleProps {
+  open: boolean;
+  onChange: (open: boolean) => unknown;
+}
+
+export const PropsPanelToggle = ({ open, onChange }: PropsPanelToggleProps) => {
+  return (
+    <Tooltip>
+      <Tooltip.Trigger asChild>
+        <Toggle.Root
+          aria-label="Props panel"
+          className={cn(
+            'relative flex h-9 w-9 items-center justify-center rounded-lg border border-slate-6 text-sm transition duration-200 ease-in-out',
+            'text-slate-11 aria-pressed:bg-slate-4 hover:text-slate-12',
+          )}
+          onPressedChange={() => onChange(!open)}
+          pressed={open}
+          value="props"
+        >
+          <IconPanelRight size={20} />
+        </Toggle.Root>
+      </Tooltip.Trigger>
+      <Tooltip.Content>Show/hide the props panel</Tooltip.Content>
+    </Tooltip>
+  );
+};
diff --git a/packages/ui/src/contexts/props-panel.tsx b/packages/ui/src/contexts/props-panel.tsx
new file mode 100644
index 0000000000..87a1a140f9
--- /dev/null
+++ b/packages/ui/src/contexts/props-panel.tsx
@@ -0,0 +1,61 @@
+'use client';
+
+import { createContext, useContext, useState } from 'react';
+import { useCachedWorkspaceState } from '../hooks/use-cached-workspace-state';
+
+const PropsPanelContext = createContext<
+  | {
+      open: boolean;
+      setOpen: (open: boolean) => void;
+      /**
+       * False until the user toggles the panel, so restoring the remembered
+       * state on load applies instantly instead of animating.
+       */
+      animated: boolean;
+    }
+  | undefined
+>(undefined);
+
+/**
+ * Must stay mounted in the preview layout, which survives navigating between
+ * templates — otherwise the panel closes or replays its opening animation on
+ * every navigation.
+ */
+export const PropsPanelProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const [cachedOpen, setCachedOpen] =
+    useCachedWorkspaceState<boolean>('props-panel-open');
+  // Writing to the workspace cache does not re-render, so toggles land in
+  // this state and the cached value only matters on load.
+  const [override, setOverride] = useState<boolean | undefined>(undefined);
+  const [animated, setAnimated] = useState(false);
+
+  const open = override ?? cachedOpen === true;
+
+  const setOpen = (newOpen: boolean) => {
+    setAnimated(true);
+    setOverride(newOpen);
+    setCachedOpen(newOpen);
+  };
+
+  return (
+    <PropsPanelContext.Provider value={{ open, setOpen, animated }}>
+      {children}
+    </PropsPanelContext.Provider>
+  );
+};
+
+export const usePropsPanel = () => {
+  const context = useContext(PropsPanelContext);
+
+  if (context === undefined) {
+    throw new Error(
+      'Cannot call `usePropsPanel` outside of a `PropsPanelProvider`.',
+    );
+  }
+
+  return context;
+};