JavaScript Email

Open-source JavaScript projects categorized as Email

Top 23 JavaScript Email Projects

  • N1

    :love_letter: An extensible desktop mail app built on the modern web. Forks welcome!

  • Nodemailer

    ✉️ Send e-mails with Node.JS – easy as cake!

    Project mention: nodemailer/nodemailer: ✉️ Send e-mails with Node.JS – easy as cake! | reddit.com/r/devopsish | 2023-01-27
  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • MJML

    MJML: the only framework that makes responsive-email easy

    Project mention: What do you guys do for emails? | reddit.com/r/webdev | 2023-02-02

    I have been using mjml for almost a year now. It has some limitations, but most of the time it doesn't cause many problems. Also if the designer tries to be fancier with the design you can change that section to an image and use it (as there are too many limitations when making email templates responsive)

  • Mailcow

    mailcow: dockerized - 🐮 + 🐋 = 💕

    Project mention: Where to start? Looking for advise on a jumping off point for website, web app, and email server self-hosting. | reddit.com/r/selfhosted | 2023-02-04

    Hosting your own email is a serious PITA, but if you're going to go down this path (and I have), I seriously recommend going with mailcow-dockerized

  • Mailtrain

    Self hosted newsletter app

    Project mention: What's the simplest solution for a self hosted newsletter | reddit.com/r/selfhosted | 2022-12-12

    I have used mailtrain for a while to send out a small newsletter with articles from an rss feed, but mailtrain does not see much development anymore.

  • Haraka

    A fast, highly extensible, and event driven SMTP server

    Project mention: How do you handle SMTP and service emails? | reddit.com/r/selfhosted | 2023-01-23

    The next time this happens i'll move to a self hosted solution, like haraka or anonaddy

  • react-email-editor

    Drag-n-Drop Email Editor Component for React.js

    Project mention: Sending Emails with ReactJS | dev.to | 2022-09-20

    import React from 'react'; export default class extends React.Component { constructor(props) { super(props); this.state = { feedback: '', name: 'Name', email: '[email protected]' }; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } render() { return ( Let's see if it works ) } handleChange(event) { this.setState({feedback: event.target.value}) } handleSubmit() { } }

    Enter fullscreen mode Exit fullscreen mode

    Now we need to add a handleSubmit() function to our component to call sendFeedback() function that will, as a result, trigger email sending via EmailJS. To keep it simple, we’ll use the default emailjs.send function.

    handleSubmit (event) {
        const templateId = 'template_id';
        this.sendFeedback(templateId, {message_html: this.state.feedback, from_name: this.state.name, reply_to: this.state.email})
      }
      sendFeedback (templateId, variables) {
        window.emailjs.send(
        'gmail', templateId,
        variables
        ).then(res => {
            console.log('Email successfully sent!')
        })
        // Handle errors here however you like, or use a React error boundary
        .catch(err => console.error('Oh well, you failed. Here some thoughts on the error that occured:', err))
      }
    
    Enter fullscreen mode Exit fullscreen mode

    Replace the function parameters with your own and test if everything went smoothly in the EmailJS dashboard.

    Don’t forget to import and use your Form component from the main component of your application which is located at src/App.js.

    Image description

    That’s all! Went pretty smoothly, huh?

    Setting up an Express backend and connecting 3rd parties

    If EmailJS won’t work for your use case, there’s an option to set up your own backend quickly and connect the 3rd party tool for email sending. As mentioned in the beginning of this article, ReactJS itself doesn’t have sending capabilities.

    The set up is very easy. This guide takes you step by step through the steps required to quickly build an Express Node.js backend.

    Once you have the backend, it’s time to connect a service specializing in sending emails. Follow this example to see how Mailjet can be implemented with your Express backend. Of course, many other tools such as SendGrid, Sendinblue or Mandrill can be implemented too thanks to their APIs. Please refer to their documentation for more details.

    As you can see, this approach is fairly quick to set up and will do its job for basic things, such as most contact forms. Since emails sent this way land usually in your inboxes, you don’t care much about formatting and styles. If the email workflow you just added is meant for the user’s inbox (for example, a newsletter confirmation form), you probably want to beautify the message a little bit. Let’s talk about how to do it.

    Building an HTML template in ReactJS

    As you know, ReactJS projects are built using reusable components, pieces of UI that can be grouped with one another and placed around web pages with almost no effort. To no surprise, building an email template in React works in exactly the same fashion.

    If you’ve ever tried to build and deliver emails with any framework, you know how painful it can be. What looks great on your testing environment, might render as a completely random set of styles and copy on users’ devices. Many browsers recognize tags but others will omit them. Others work with inline styles but, again – not all of them. As a result, even if you test your emails inside out, possibly something is bound to go wrong.

    One tool that aims to prevent such troubles is Mjml. It’s a markup language that makes it easy to generate fully-responsive HTML templates. It comes with a large set of frequently used components that can be inserted in your mailings without coding them from scratch.

    Another really useful tool you can use is React-html-email. It’s used to quickly build reusable components of your choice. You insert your code sample, however long it is, and immediately get a single-line code component you can use throughout the project. See the example below:

    import React from 'react';
    import { Email, Item, A} from 'react-html-email';
    export default function InlineLink({name, children}) {
      return (
      
        
           Hello {name}
           Click me!
        
        
          {children}
        
      
    )};
    
    Enter fullscreen mode Exit fullscreen mode

    Add the code from above to a file in your client project to src directory and call it Email.js. Don’t forget to add react-html-email component to your project. Then import this component to client/src/Form.js and renderEmail from react-html-email to client/src/Form.js.

    import MyEmail from './Email'
    import { renderEmail } from 'react-html-email'
    
    Enter fullscreen mode Exit fullscreen mode

    After that you can use the following line to generate HTML code of your message:

    const messageHtml =  renderEmail(); // HTML code
    
    Enter fullscreen mode Exit fullscreen mode

    React-html-email comes with an email validator that immediately checks and informs you if there were any errors in the component’s code.

    There’s also a really interesting WYSIWYG email editor for React with drag & drop features, aptly known as React Email Editor. Check it out and see if it can accelerate your development.

    Finally, whether you use these tools or not, there’s a bunch of tips to take into consideration when trying to build a responsive email template. This article makes for a fairly compelling source.

    Sending emails with Nodemailer

    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. If you don’t, do it before we start as we’ll be using both.

    In this example, we’ll refer to a web form you could add to your website, for example, to let customers reach out quickly to your sales and support teams. Start off with building the UI of such form in ReactJS. Need some inspiration? Check out this list of 45 ready-to-implement React forms.

    Now, add the code to handle the form submissions. There are tons of parameters that can be used with Nodemailer, review them here and add according to your needs. Here’s an example:

    handleSubmit(event){
    const messageHtml =  renderEmail(
       {this.state.feedback}
    );
            axios({
                method: "POST",
                url:"http://localhost:3000/send",
                data: {
            name: this.state.name,
            email: this.state.email,
            messageHtml: messageHtml
                }
            }).then((response)=>{
                if (response.data.msg === 'success'){
                    alert("Email sent, awesome!");
                    this.resetForm()
                }else if(response.data.msg === 'fail'){
                    alert("Oops, something went wrong. Try again")
                }
            })
        }
    
    Enter fullscreen mode Exit fullscreen mode

    Add axios to your client application. In express_react_example/client run:

    npm install axios --save
    
    Enter fullscreen mode Exit fullscreen mode

    And add the import to the

    express_react_example/client/Form.js:

    import axios from ‘axios’;
    
    Enter fullscreen mode Exit fullscreen mode

    Make sure you reset the form once a message is submitted, in case a user wants to send another one.

    resetForm(){
            this.setState({feedback: ''});
        }
    
    Enter fullscreen mode Exit fullscreen mode

    Now, it’s about time we add Nodemailer to our project (the backend part):

    npm install nodemailer --save
    
    Enter fullscreen mode Exit fullscreen mode

    and create a config file to store the credentials of an account we’re going to use. We’re adding it to the backend so there are no security concerns this time. Put this file next to your server source code and call it config.js.

    module.exports = {
        USER: 'YOUR_EMAIL_ADDRESS',
        PASS: 'PASSWORD_FOR_EMAIL'
    }
    
    Enter fullscreen mode Exit fullscreen mode

    Then, we’ll want to set up the transporter to deliver our messages. Nodemailer can be used with different types of transporters. We recommend the default one, referred to as SMTP transporter, due to the simplicity of installation and its reliability. If you’re not happy with it, you can also integrate other transporters with your Nodemailer campaign. We’ll stick with the default one here.

    First of all, we need to share our credentials with the SMTP transporter. Add the following code to your server source code which should be called server.js if you followed the Express.js setup instructions:

    const nodemailer = require('nodemailer');
    const creds = require('./config');
    var transport = {
      host: 'your_host_here', // e.g. smtp.gmail.com
      auth: {
        user: creds.USER,
        pass: creds.PASS
      }
    }
    var transporter = nodemailer.createTransport(transport)
    transporter.verify((error, success) => {
      if (error) {
        console.log(error);
      } else {
        console.log('All works fine, congratz!');
      }
    });
    
    Enter fullscreen mode Exit fullscreen mode

    Once done, we set up the post route to take our emails to its final destination – our inbox!

    app.use(express.json()); app.post('/send', (req, res, next) => {
      const name = req.body.name
      const email = req.body.email
      const message = req.body.messageHtml
      var mail = {
        from: name,
        to: 'RECEIVING_EMAIL_ADDRESS_GOES_HERE',
        subject: 'Contact form request',
        html: message
      }
      transporter.sendMail(mail, (err, data) => {
        if (err) {
          res.json({
            msg: 'fail'
          })
        } else {
          res.json({
            msg: 'success'
          })
        }
      })
    })
    
    Enter fullscreen mode Exit fullscreen mode

    Now run the backend by running the following command in the root of your application:

    node server.js
    
    Enter fullscreen mode Exit fullscreen mode

    And run the frontend part too by running the command at the client directory:

    npm start
    
    Enter fullscreen mode Exit fullscreen mode

    All done! You should receive an email, the form will reset and a user should see the confirmation you added in your React project.

    Image description


    Summary
    We’ve tried to summarize various methods that can be used to send emails in ReactJS. Given how powerful and useful React is for nearly all kinds of projects, you don’t want to get stuck on something as simple as form submission. By all means, try them all and see which fits best for your project. Best of luck!

    I hope you enjoyed our tutorial on how to send emails with attachments via ReactJS that was originally published on Mailtrap Blog.

  • InfluxDB

    Build time-series-based applications quickly and at scale.. InfluxDB is the Time Series Platform where developers build real-time applications for analytics, IoT and cloud-native services. Easy to start, it is available in the cloud or on-premises.

  • email-templates

    Create, preview, and send custom Node.js email templates. Automatic inline CSS, stylesheets, embedded images, and more. Made for @forwardemail, @ladjs, @cabinjs, @spamscanner, and @breejs.

    Project mention: Sending Emails with Node.js | dev.to | 2022-09-12

    Let’s experiment with the email-templates package. It has several interesting features:

  • juice

    Juice inlines CSS stylesheets into your HTML source.

    Project mention: How to Improve Your Emails With CSS? | dev.to | 2022-09-02

    Another tool worth mentioning is the Responsive Email CSS Inliner by HTML Email. Just like other conversion tools, this inliner works similarly by reading your embedded CSS in one window and making it inline in another. The feature that makes it stand out from the rest is that it also has a third window that demonstrates what the actual email would look like, both on mobile and desktop. Additionally, there is an option to download a .html file of the email. Since the tool is powered by Juice, an open-source project, it can also be easily integrated into your Node.js projects and works in client JavaScript.

  • mailwind

    Use Tailwind CSS to design HTML emails.

    Project mention: I attempted to create a Laravel package that allows you to use TailwindCSS to design your mailables instead of relying on markdown or inline styles only to discover email clients are still stuck in 1999. The package will likely never be production ready but I figured I'd share it anyway | reddit.com/r/laravel | 2022-10-10

    I'm not sure if you've used it, but you may wish to refer to Mailwind. It was designed for this.

  • sendgrid-nodejs

    The Official Twilio SendGrid Led, Community Driven Node.js API Library

    Project mention: Show HN: Mass Dissent – Easily send a letter to U.S. Congress representatives | news.ycombinator.com | 2023-02-04
  • Papercut

    Papercut SMTP -- The Simple Desktop Email Server

    Project mention: Favorite fake email server for testing emails | reddit.com/r/dotnet | 2022-08-03
  • free-email-forwarding

    The best free email forwarding for custom domains. Visit our website to get started (SMTP server)

    Project mention: LPT: Add +companyname to your email address when registering for anything e.g. [email protected] Your email address will work as normal but you will know who leaked your data when you receive scams / spam. You're welcome! | reddit.com/r/LifeProTips | 2023-02-01

    Head over to forwardemail.net

  • wildduck

    Opinionated email server

    Project mention: Ask HN: Just got a brand new server, what do I do first? | news.ycombinator.com | 2023-02-01

    - https://wildduck.email/ (E-mail)

    Even though I have self-hosted things individually (eg: my Ghost blog on a RasPi connected to my home WiFi), something which I've always been concerned about is the separation of all these services, since they must have APIs and access rules. What's an ideal way of setting up a multi-service server like this, and what security policies should I implement. Additionally what are some must haves that you have running on your servers?

    I understand self-hosting is a huge labour of love, and I have no qualms in investing time/effort learning :)

  • aws-lambda-ses-forwarder

    Serverless email forwarding using AWS Lambda and SES

    Project mention: Cheapest way to get domain specific emails? | reddit.com/r/webdev | 2022-12-18

    If they cannot use cloudflare(since we need to use its nameserver), you can self hosted a tool like https://github.com/arithmetric/aws-lambda-ses-forwarder It's powered by AWS Lambda so work flawlessly.

  • linkifyjs

    Linkify is a JavaScript plugin for finding links in plain-text and converting them to HTML <a> tags.

  • node-html-to-text

    Advanced html to text converter

  • waveboxapp

    Wavebox Classic has been updated to Wavebox 10. Learn more Wavebox.io

    Project mention: First to identify those two apps in the middle gets my silver award. | reddit.com/r/GoForGold | 2022-12-09
  • mjml-react

    React component library to generate the HTML emails on the fly

    Project mention: JSX Mail: Ending All Your Problems When Creating Email Templates | news.ycombinator.com | 2022-10-05

    Agreed that MJML is great, but I wouldn't call JSX a useless abstraction. Using JSX as a templating language for MJML has real benefits, like being able to use javascript directly in templates instead of having to remember handlebars/mustache/nunjucks/etc templating syntax.

    And libraries like mjml-react make it really easy.

    https://github.com/wix-incubator/mjml-react/

  • sieve

    Sieve Script Editor (by thsmi)

    Project mention: I Want To Serve My Email Locally From My Linux Server With a Web-Based Interface | reddit.com/r/selfhosted | 2022-12-06

    FYI You shouldn't really be using procmail for sorting see the notice at the top of this page. Dovecot has built in seive functionality witch you can use this desktop GUI to manage.

  • thunderbird-conversations

    An extension for Thunderbird that allows you to view threads as "real" conversations, including your own emails. This extension also adds a bunch of useful UI features in the conversation view.

    Project mention: Just started using Thunderbird after multiple recommendations. Running into multiple usability issues. Please help me with my computer illiteracy. | reddit.com/r/Thunderbird | 2022-05-12

    4. Conversations I have used for a very short time that extension many years ago. It seemed to work correctly (at the time), but I didn't like the feel of it, so I removed it. When you installed the extension, did you follow all recommendations? I am assuming you have installed this extension. Read carefully the Wiki to make sure you have installed it correctly. Check especially the addons that it replaces as well as the incompatible add-ons. From memory, when you install that extension, it tells you exactly what settings you have to select so it works correctly. if you haven't followed these instructions, then Thunderbird Conversations might be the culprit. Apart from that, since I don't currently use this extension, I won't say more about it.

  • forwardemail.net

    The best free email forwarding for custom domains (Web Server)

  • nextacular

    An open-source starter kit that will help you build full-stack multi-tenant SaaS platforms efficiently and help you focus on developing your core SaaS features. Built on top of popular and modern technologies such as Next JS, Tailwind, Prisma, and Stripe.

    Project mention: Looking for a boilerplate | reddit.com/r/SaaS | 2022-12-25
  • Sonar

    Write Clean JavaScript Code. Always.. Sonar helps you commit clean code every time. With over 300 unique rules to find JavaScript bugs, code smells & vulnerabilities, Sonar finds the issues while you focus on the work.

NOTE: The open source projects on this list are ordered by number of github stars. The number of mentions indicates repo mentiontions in the last 12 Months or since we started tracking (Dec 2020). The latest post mention was on 2023-02-04.

JavaScript Email related posts

Index

What are some of the best open-source Email projects in JavaScript? This list will help you:

Project Stars
1 N1 24,713
2 Nodemailer 15,366
3 MJML 14,903
4 Mailcow 6,016
5 Mailtrain 5,179
6 Haraka 4,302
7 react-email-editor 3,668
8 email-templates 3,493
9 juice 2,928
10 mailwind 2,888
11 sendgrid-nodejs 2,793
12 Papercut 2,449
13 free-email-forwarding 2,238
14 wildduck 1,643
15 aws-lambda-ses-forwarder 1,528
16 linkifyjs 1,491
17 node-html-to-text 1,293
18 waveboxapp 1,236
19 mjml-react 927
20 sieve 629
21 thunderbird-conversations 581
22 forwardemail.net 518
23 nextacular 515
Write Clean JavaScript Code. Always.
Sonar helps you commit clean code every time. With over 300 unique rules to find JavaScript bugs, code smells & vulnerabilities, Sonar finds the issues while you focus on the work.
www.sonarsource.com