Postcard


A email generator written in React.

HTML emails are hard. Ideally, we want to support various email clients, ancient and
modern while also being able to write the email in modern
technologies we are familiar with and use throughout our system.

Postcard is a tool that allows html emails to be written in React and styled with scss. As
input, you provide a tree of stateless components and some scss, and we'll do a couple things:
- Render the scss to css.
- Render the React component tree with react-dom/server's renderToStaticMarkup. This is why the
components should be stateless - the components are only rendered once and are used purely as a
way to break up the email into reusable chunks.
- Inline all styles into the html. Some email clients strip out all style tags and therefore
inlining styles into each html element is the only way to ensure they will be properly styled.
This tool uses Mailchimp's CSS inliner.

Installation

NOTE: node >= v7.6 is required for use of async/await, which this package requires.

npm install -g @density/postcard

Documentation

Run postcard --help.

React component example

``
$ cat index.js
function Container(props) {
return

;
}

// A postcard module must defaultly export a function that will be called with render parameters.
// Right now the only parameter is head, which is some jsx that must be injected into the
// of your email.
module.exports = ({head}) => (


{/ head data is injected below /}
{head}





Title

lorem ipsum dolar set amet.

);

$ cat styles.scss
.container {
background-color: white;
max-width: 800px;
margin: 20px auto;
}
$ # Postcard will combine together and minify the two sources!
$ postcard ./index.js --styles ./styles.js

Title

lorem ipsum dolar set amet.

``