react-email VS MJML

React Email (GitHub: resend/react-email)

Thanks @react-email a open source helping built email with React components and Tailwind CSS.

FWIW the Tailwind implementation in react-email is not well done. The code double render React to static markup just to parse it into DOM then parse out the style and className attributes using a lot of regex https://github.com/resendlabs/react-email/blob/main/packages....

It's likely to be brittle and also very slow - slow enough to almost cause an incident when we tried to use it in production because emails were taking _seconds_ to render.

Definitely agree it's such a pain. All the credit here goes to Resend team building out https://github.com/resendlabs/react-email and a new product from them: https://resend.com

Nice project, I like the way you go about theming. How would you compare yours to other react/jsx based template, and rendering, for email, i.e. https://github.com/resendlabs/react-email ?

After seeing react-email I have decided to build something similar for Svelte.

https://github.com/resendlabs/react-email or MJML https://mjml.io

MJML is a markup language that creates responsive email templates. It is intuitive in the sense that its markup is rendered into responsive HTML for any device and email client.

}

Can be easily stored in Postgres jsonb. Very easy to add Reacjs base widgets like mentioning, media, diagrams, etc

The drawback is that you can't design the exactly the same pixel perfect template.

The better abstraction is MJML - https://mjml.io/

With slatejs/platejs json format you can copy&paste your editings across various assets in CRM, knowledge base, etc

Was thinking about using something similar to /SendWithSES/Drag-and-Drop-Email-Designer as the last final step ... but couldn't settle it my brain and most end-users dont care anyway.

Any thoughts on data representations and "Postgres <> Editor > Email HTML > Send button" dataflow is greatly appreciated. Very few people have serious thoughts on the subject.

The email service is built with Symfony and its templating engine, Twig. Templates are written in MJML markup, an email framework that helps us address the first problem we mentioned. Twig allows us to pass the data to the MJML template without breaking the MJML structure. After the data is rendered, we send the result to a small MJML service that converts the MJML markup to HTML. Here is an example of a template:

Anyway, I stumbled upon a tool called MJML that could be used to implement this feature.

We’ll leverage Novu’s code-first workflow (Echo) approach in creating notification workflows within our codebase. Novu empowers you with the ability to integrate email, SMS, and chat template and content generators, such as React Email, and MJML into your app via code.

What an excellent resource! (And yes Outlook is a pain!)

We've tried building email templates for notifications for our apps where I work, and it has typically been a pain. We have since swapped to using mjml (https://mjml.io/) to build the templates, and it's working wonders. The output seems the be the most compatible with all different devices that we've tested on.

The other tool we enjoy using is Litmus (litmus.com), which allows you to throw in an email template and see what it looks like on all kinds of apps and devices.

Both of these have been really invaluable to designing emails for our apps.

I am using MJML and it’s relatively easy to build your described layout with snippets from the docs.

https://mjml.io/