React as Template Engine for Emails & PDFs

[andrashee]

We decided to use React for our UI components on the website.

One other use case which we have is to send emails. E.g. for the payment confirmation, first payouts, failed payments, ...
We haven't decided yet what template engine we would like to use there.

One option could be to also use React (.tsx templates) for this. With ReactDOMServer.renderToStaticMarkup(email), one can generate static html without any js hydration code. It could allow us to have modular, typed email templates without adding yet another template engine like handlebar. We could also add the email templates to our storybook, having everything nicely organized there.
Here an example blog: https://blog.chjweb.se/generate-html-emails-with-react-on-the-server

The same could work with generating pds: https://exportsdk.com/how-to-generate-pdfs-with-nodejs.

What are your thoughts on this @socialincome-san/admins-public-repo? Or are there other, better solutions?

[ssandino]

This also how Yelp does it (they write Storybook examples for emails and see them displayed in the same way as other web components). They wrote a nice wrap up about their setup.

[renestalder]

Here is what I recommend for email templates: https://mjml.io/

I don't know what your experience is on email templating. So, In case I'm over explaining here, ignore it: Email clients are nothing like web browsers. They do things differently, and they all do it completely differently from each other. Still today, the only reliable solution for layouting and styling in email clients is using HTML tables + inline styles. And to make that task easier, tools like mjml help you with putting a framework around it, so you don't have to bother with finding out all the quirks.

Here's a good up-to-date blog post how you could combine that with React:
https://www.joshwcomeau.com/react/wonderful-emails-with-mjml-and-mdx/

[andrashee]

Here is what I recommend for email templates: https://mjml.io/

I don't know what your experience is on email templating. So, In case I'm over explaining here, ignore it: Email clients are nothing like web browsers. They do things differently, and they all do it completely differently from each other. Still today, the only reliable solution for layouting and styling in email clients is using HTML tables + inline styles. And to make that task easier, tools like mjml help you with putting a framework around it, so you don't have to bother with finding out all the quirks.

Here's a good up-to-date blog post how you could combine that with React: https://www.joshwcomeau.com/react/wonderful-emails-with-mjml-and-mdx/

Awesome! Sounds like the way to go 👍

[ssandino]

True, HTML for emails really is close to hell. We do have a working html-template which uses exactly as recommended: tables + inline styles: #157.

One thing I found interesting in the article mentioned above and I forgot about it: It would be nice if every email sent out has its own link for web view. Well, this is a bit off topic, but then again something to keep in mind when building on the setup.

[ssandino]

@brennerthomas here

[ssandino]

Closing this discussion since we have decided to use MJML and already in use.