React-email (resend) component in a StoryBook story

email.stories.tsx

import { render } from "@react-email/render";
import type { Meta, StoryFn } from "@storybook/react";
import Email from "./email";

const meta: Meta<typeof Email> = {
  title: "components/Email",
  component: Email,
  parameters: {
    layout: "fullscreen",
  },
  argTypes: {},
};

export default meta;

// Uses a storybook function to control the rendering
export const Email: StoryFn<typeof Email> = (props) => {
  // Rendering is done using react-email render function
  const doc = render(<Email {...props} />);
  return (
    <iframe
      // the rendered email is provided to an iframe like in the preview app from Resend
      srcDoc={doc}
      style={{ border: "0px", width: "100%", height: "100%" }}
    ></iframe>
  );
};

storybook.css

/* Import this file in .storybook/preview.ts */
/* This allows full height components / pages / emails */

html,
#storybook-root,
body {
  height: 100%;
}