Nukem's Possible Manifestation


    1.0.3 • Public • Published

    mail-a-tron logo


    ✉️ Painless email templates with Next.js ✉️

    mail-a-tron demo gif

    Mail-a-tron provides you with a better workflow for using email templates in your app.

    • 🚀 Powerful: Use React to construct your email templates as composable components.
    • 🛠️ Maintanable: Preview your designs, see how different data affects your layouts.
    • 📦 Modular: Deploy as a microservice that responds to HTTP requests with html ready to be sent as an email.

    Getting started

    Make sure you have docker installed, clone the repo and run:

    docker-compose up

    Browse to http://localhost:3000/welcome to see the an example template.

    How does it work?

    Mail-a-tron is built on top of Zeit's Next.js - a minimalistic framework for server-rendered React applications. If you're unfamiliar with Next, take a few minutes to read through their readme. This project leverages a couple of fundamental features:

    • URL paths are automatically routed to components in /pages with query parameters passed in.
    • Automatic server-side rendering - you get a fully formed html response when hitting any route.
    • Webpack, hot module reloading, minification, isolated scoped css, and many other things come for free.

    In mail-a-tron, we simply build each email template as a separate page. This gives us an easy way to preview them in the browser, whilst also lending itself to be used as a microservice where fully formed email templates are retrieved from an HTTP request.

    Designing anything beyond simple text-based emails is challenging due to the inconsistent support for html and css properties. We use some components from the react-html-email project to avoid common pitfalls and extend deprecated react attributes, as well as provide some of our own.


    The quickest way to get a deployment out in the wild is to use now. Make sure you have yarn installed (you can also use npm if you prefer):

    yarn global add now

    Alternatively, to deploy it manually you can run:

    yarn run build
    yarn run start


    This project is still young and will probably have a few bugs to be ironed out. There are also many components and example pages which could be included to help people with common use cases such as background images and invoice emails.

    If you find a bug or have any suggestion for improvements feel free to create an issue, or even better a pull request and we'll try to get it included in the project.

    Lets give developers a powerful new tool to simplify their workflows when dealing with emails!

    Suggested improvements


    Originally this project started out by integrating react-storybook for previewing emails and quickly inspecting components with different sets of mocked data. We ran into issues getting responsiveness to work well since react-storybook puts the component inside an iframe. There was a proposed PR to introduce some UI elements into react-storybook that could potentially solve this, but it seems that this approach would be better suited if it was re-implemented as a decorator.


    This project could do with more templates that can be used as boilerplates. The welcome template is roughly based on a free email template pack by Litmus.






    npm i mail-a-tron

    DownloadsWeekly Downloads






    Last publish


    • jcsmesquita