Use storybook for email preview

[bobylito]

Hello everyone,

I've started using react-email a few weeks ago, and so far, this is the best email authoring solution I've found.

On my projects, I'm also a big user of Storybook and I really like the DX and the very well-balanced set of features.

So I had to try to fit in react-email into storybook and I made a gist with an example of story that renders an email. It's really just a first step and it can be improved upon. I hope it can help or even inspire others.

https://gist.github.com/bobylito/c006fd53daaccb7ea719e0531fe66e59

[gabrielmfern]

Being able to change the props dynamically just like storybook on preview is definitely on my PR to-do list. Nice idea!

Just a question, since I thought about this and wasn't exactly sure it would have so many use cases, in what use cases you wanted to have storybook exactly?

[bobylito]

Hi,
Thanks for your question. Obviously, the react-email nextjs offers a similar usage as a storybook would. However, using storybook offers a few advantages:

• rock solid implementation
• extensibility. Example: I've integrated with i18next
• a huge amounts of quality of life features : dark/light mode, layout sizes
• deployment on chromatic

[WillsB3]

I've also been thinking about exactly this. One of the thoughts I had was that it'd be really nice for us to be able to show all our custom components as standalone stories in storybook so that email authors have an easy reference to all available components they can drop into their emails.

I did actually try a crude manual integration but came unstuck as we're using the Tailwind integration with React email and I couldn't find a way to access the CSS that React.email generates when using the <Tailwind> component so that I could inject those styles into Storybook.

[WillsB3]

Follow up on this. I have a solution which is working really well. Storybook is now a one-stop-shop for our developers when working on writing e-mail templates using JSX via React.email.

My solution consists of a couple of pieces:

1. A React-email project that includes a Storybook. I've written a custom story render function which uses react-email's render method under the hood. The approach is based on the gist from @bobylito linked above, but I've adapted the approach to allow async rendering of stories as my render process now also runs the output from @react-email through a series of async transformers (see below). I also have a bunch of CSS customisations for Storybook's iframe that make stories work better now they are all rendered within iFrames.

2. A custom set of helpers that for now includes 2 things:

   1. A set of (currently 1, but the idea is to expand this further) transformers that allow post-render transformations to be run on the HTML output by react-emails render function. Our transformer stack currently only consists of 1 transformer which uses the posthtml-mso package to allow support for MSO conditional comments (See Allow custom post-render transformation steps #1447 for further discussion on how / if post-render transformations could/should be supported "natively" by React -email - this would prevent the need for a custom export function). There is scope to implement further transformers, for example those offered by Maizzle as and when we need them.

   2. A custom export script that calls react-email export and then runs the resulting HTML through our custom transformer stack.

3. A custom Storybook add-on and small Express.JS powered Node server that provides the ability for users to render previews of the resulting email template (after it's been rendered by react-email and has gone through our transformers) using the Mailchimp API. We use Mailchimp for marketing and transactional emails and so unfortunately cannot rely on React-emails JSX support for props for handling merge variables. Instead these are handled by Mailchimp. These previews are then show within our Storybook add-on's UI.

   The add-on supports rendering emails for different "scenarios" which means that we can test our templates that use Mailchimp conditional tags for conditionally rendering portions of the email easily. A templates scenarios are defined within the emails .stories.tsx file.

Hoping I'll be able to share more details (and maybe code samples) soon.

[spjpgrd]

This is exactly what I was about to embark on!

If you do have have any code samples, that would be so wonderful.
Otherwise, your outlined overview is a great starting point. Thanks for writing that all up.