Best way to render HTML emails in React app

react send email npm
nodemailer react
react email inbox
react editor github
react drag and drop builder
render html from json react
read html file in react js

I create an SPA React application that can send and receive email messages.

What is the best way to render received HTML email messages? The task becomes problematic when I receive a huge email message with a lot of images in base64 and HTML tags.

I receive the email as JSON HTML string from API and want to render it properly.

I tried two approaches:

  1. Render in div with dangerouslySetInnerHTML={{ __html: htmlMessageText }} - there is problem with safety
  2. Use my email editor in preview mode (Jodit) - there is problem with Layout Thrashing

In both approaches, there is the problem with performance. Emails (800 lines) renders a lot of time (~2 minutes).

There is no problem with simple HTML emails, these renders fast, but with some of them - especially bigger emails - application like to freeze layout.

You could try a HTML to React parser...

How to render output from react-html-email using React and , We want to make the automatically generated emails better. of the server-side rendering abilities of React to get a compiled HTML file ready to Supposing we'​re in a project that was created with create-react-app , we can  Now, let’s assume we want to use Nodemailer to build a backend for our React email client. It’s perfectly doable and not so hard to set up. Nodemailer is a go-to module for anyone needing to send emails with Node.js framework. If you followed the example above, you should have already both Create-React-App and Express server set up.

The performance problems are caused by big data-URI images. The safety problems can be solved by a sanitizer library. So your algorithm might look like this:

  1. Replace data: URIs with blob:. For inspiration you can check out the relevant part in the code of TinyMCE.
  2. Now that after step 1 there is much less markup left, pass it through an HTML sanitizer. I would recommend DOMPurify.
  3. dangerouslySetInnerHTML

How to build emails with React, Create elegant HTML email templates using React. import { Email, Item, Span, A, renderEmail } from 'react-html-email' See MailChimp's HTML guide for how this works. You can see it in our kitchenSink.js example. My savior was react-html-email. It allows us to finally make reusable, component-based emails. The days of copying and pasting giant chunks of HTML into email service providers (ESPs) are over. Just enter your component inside `renderEmail` and the module will render it out.

You can use the ref elements to pass HTML in your react component

class Demo extends Component {
    constructor(props) {


    render() {
         //Here you can add your Html code 
         //or you can pass by props or any state
         this.el.innerHTML = '';

        return (
            <div ref={el => this.el = el}>


export default Demo

react-html-email, react-html-email provides a set of components for a standard 600px table layout kitchenSink.jsx does not display well in default Galaxy S6 email client. If you are new to React, you can check the official documentation to get started. Setting up your React application. To set up an application, you can use create-react-app. It is the easiest way to get started with a React project. A CRA demo is out of the scope of the article, though, so we’ll skip that and style a make-believe to-do application.

chromakode/react-html-email: Create elegant HTML email , Can you send even the simplest emails from a React-powered website without to client/src/Form.js and renderEmail from react-html-email to  In my app, I'm trying to make a document builder (sort of like building emails in mailchimp). When you click on an element's icon, the markup for that element will be added to the document page. Conceptually, I'm not sure of the best way to do this in React.

Full Guide on How to Send Emails with React, There had to be a better way. My savior import { Email, Item, A, renderEmail } from 'react-html-email';const InlineLink = () => ( import courier from 'courier-js'; Luckily the React community is thriving and creating lots of helpful tools. If you’re interested in frameworks for building large React apps that render on the client and server, check out the Electrode by Walmart Labs or Next.js. Or if you want to render React in Ruby, check out AirBnB’s Hypernova.

Creating and Sending Reusable Emails with React, Find out how to render an HTML string in the DOM without escaping, using React​. I had this problem - I needed to add an HTML string in a React application, coming from a But there are good use cases for this. Email me (no guest posts, no "add this link", no product placement or review requests pls). You can send messages from other email accounts or right from your app during the testing process. This feature is available for paid subscription plans only. If emails from your React contact form end up in the Mailtrap’s inbox, the next step is to check the SMTP on your site.