Need help with mail-a-tron?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

LightningK0ala
123 Stars 4 Forks Other 18 Commits 1 Opened issues

Description

✉️ Painless email templates with Next.js ✉️

Services available

!
?

Need anything else?

Contributors list

# 310,922
TypeScr...
Node.js
turn-ba...
multipl...
10 commits
# 9,048
Symfony
Jekyll
api-pla...
vanilla...
1 commit

mail-a-tron logo

Mail-a-tron

✉️ 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.
  • 🛠️ Maintainable: 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:

bash
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.

Deployment

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
now

Alternatively, to deploy it manually you can run:

yarn
yarn run build
yarn run start

Contribute

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

Storybook

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.

Templates

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.

mjml

The mjml project has a more robust set of React components, it would be nice to migrate the current react-html-email library to that one - there's an open issue at the moment regarding this https://github.com/mjmlio/mjml/issues/488

Resources

Authors

License

MIT

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.