resend/react-email-pnpm-example

This example repository shows how to combine React Email with a pnpm workspace setup. The practical benefit is that you can design email templates using familiar web development tools, share reusable pieces of those emails across your project, and still use a visual previewer to see what your emails look like before sending them. When you run the main web app, you get a simple webpage with a button that actually sends a test email to your inbox. At a high level, the project is structured into two main buckets: an "apps" folder for your main web application and a "packages" folder for shared resources. The packages folder holds your reusable email components and your actual email templates, keeping them separate from the main application. This structure means a developer can tweak an email template in one place and the main web app automatically picks up the change. The emails themselves are delivered through a service called Resend, which requires you to plug in your own API key to connect your app to the email provider. A product manager or founder working with a small development team would use this setup when they want to build polished, branded transactional emails, like welcome messages or password resets, without trapping those templates inside the main application's code. For example, a designer could refine the layout of a purchase confirmation email using the visual preview tool, while a developer wires up the web app to trigger that email when a customer clicks a button. One notable thing about this project is how it handles the email preview tool. Because organizing code into a shared workspace can sometimes confuse external software, the project intentionally includes a hidden folder specifically for the email previewer to function properly. The README notes this is currently the recommended workaround to ensure the preview tool plays nicely within a shared workspace environment.