Email Template Editor

Revolvapp

This is an email templates editor. It helps to create and edit
email visually. Just get a copy and integrate with your product.

Revolvapp uses a simplified
syntax to create HTML emails

This markup helps to create a template faster and easier.
Here is an example of the template that is in the Revolvapp demo.

<re-html>
    <re-head>
        <re-title>My Email</re-title>
        <re-font href="https://fonts.googleapis.com/css?family=Inter:400,400i,700,700i"></re-font>
    </re-head>
    <re-body background-color="#fff" padding="40px 5px 80px 5px">
        <re-preheader>This is preheader and it will show as a preview in some mail clients.</re-preheader>
        <re-main background-color="#fff" border-radius="6px">
            <re-block border-radius="10px" align="center" padding="52px" background-color="#f2fff0">
                <re-image src="https://imperavi.com/_email2/revolvapp-logo.png" href="https://imperavi.com" width="135px"></re-image>
                <re-text margin="48px 0 0 0" font-size="12px" color="#919990" font-weight="bold">NEWSLETTER</re-text>
                <re-heading href="http://google.com" margin="10px 0 0 0" level="h1">
                    Beautifully written<br class="mobile-hidden"> headline goes here
                </re-heading>
                <re-image src="https://imperavi.com/_email2/photo-1.jpg" width="447px"></re-image>
                <re-text margin="0 0 36px 0">
                    The carbon in our apple pies Apollonius of Perga rich in mystery shores of the cosmic ocean inconspicuous motes of rock and gas Vangelis. Descended from astronomers permanence of the stars across the centuries preserve and cherish that pale blue dot ship of the imagination muse about.
                </re-text>
                <re-button href="https://example.com" border-radius="3px" background-color="#3C887E" font-size="14px">CTA text</re-button>
            </re-block>
            <re-block padding="50px 0">
                <re-heading align="center" level="h2" margin="0 0 20px 0">
                    Highlights
                </re-heading>
                <re-grid>
                    <re-column width="260px" padding="0 0 20px 0">
                        <re-image href="https://imperavi.com" width="220px" src="https://imperavi.com/_email2/photo-2.jpg"></re-image>
                        <re-heading margin="10px 0" href="https://example.com" level="h3">
                            The ash of stellar alchemy stirred by starlight
                        </re-heading>
                        <re-text color="#58585d" font-size="14px">
                            With pretty stories for which there's little good evidence network of wormholes vanquish the impossible a mote of dust suspended in a sunbeam Drake Equation.
                        </re-text>
                    </re-column>
                    <re-column-spacer width="40px"></re-column-spacer>
                    <re-column width="260px" padding="0 0 20px 0">
                        <re-image href="https://imperavi.com" width="220px" src="https://imperavi.com/_email2/photo-3.jpg"></re-image>
                        <re-heading margin="10px 0" href="https://example.com" level="h3">
                            Birth something incredible is waiting to be known
                        </re-heading>
                        <re-text color="#58585d" font-size="14px">
                            Encyclopaedia galactica two ghostly white figures in coveralls and helmets are soflty dancing colonies circumnavigated as a patch of light decipherment
                        </re-text>
                    </re-column>
                </re-grid>
                <re-link align="center" margin="40px 0 20px 0" color="#3C887E" href="https://example.com/link/" font-weight="bold" font-size="20px">
                    Read more on our website
                </re-link>
            </re-block>
        </re-main>
        <re-footer padding="50px 60px 60px 60px" background-color="#3A3238" border-radius="6px">
            <re-block align="center">
                <re-text color="#D7D6D7" font-size="12px">
                    Copyright © 2020 Revolvapp<br>
                    All rights reserved
                    <br><br>
                    Revolvapp Inc, Espoo, Finland 02650
                </re-text>
                <re-social margin="40px 0 40px 0">
                    <re-social-item href="https://facebook.com/" src="https://imperavi.com/_email2/facebook-logo.png" width="24px" alt="Facebook"></re-social-item>
                    <re-social-spacer>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</re-social-spacer>
                    <re-social-item href="https://twitter.com/" src="https://imperavi.com/_email2/twitter-logo.png" width="24px" alt="Twitter"></re-social-item>
                    <re-social-spacer>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</re-social-spacer>
                    <re-social-item href="https://instagram.com/" src="https://imperavi.com/_email2/instagram-logo.png" width="24px" alt="Instagram"></re-social-item>
                </re-social>
                <re-text color="#D7D6D7" font-size="12px">
                    You subscribed to this newsletter because you agreed to receive our monthly news shot when you registered your email on <a href="https://example.com" style="color: #fff;">https://revolvapp.com</a>.
                    To unsubscribe, click <a href="https://example.com" style="color: #fff;">Unsubscribe</a>.
                </re-text>
            </re-block>
        </re-footer>
    </re-body>
</re-html>

Revolvapp can generate
HTML emails based on a template.

The email code is fully ready to be sent through email services.
Here is an example of generated HTML email from the Revolvapp demo.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        My Email
    </title>
    <link href="https://fonts.googleapis.com/css?family=Inter:400,400i,700,700i" rel="stylesheet">
    <style type="text/css">
        #outlook a{padding:0}.ExternalClass{width:100%}.ExternalClass,.ExternalClass p,.ExternalClass span,.ExternalClass font,.ExternalClass td,.ExternalClass div{line-height:100%}body,table,td,a{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}table,td{mso-table-lspace:0;mso-table-rspace:0}img{-ms-interpolation-mode:bicubic}img{border:0;outline:none;text-decoration:none}a img{border:none}td img{vertical-align:top}table,table td{border-collapse:collapse}body{margin:0;padding:0;width:100% !important}.mobile-spacer{width:0;display:none}@media all and (max-width:639px){.container{width:100% !important;max-width:600px !important}.mobile{width:auto !important;max-width:100% !important;display:block !important}.mobile-center{text-align:center !important}.mobile-right{text-align:right !important}.mobile-left{text-align:left!important;}.mobile-hidden{max-height:0;display:none !important;mso-hide:all;overflow:hidden}.mobile-spacer{width:auto !important;display:table !important}.mobile-image,.mobile-image img {height: auto !important; max-width: 600px !important; width: 100% !important}}
    </style>
    <!--[if mso]><style type="text/css">body, table, td, a { font-family: Arial, Helvetica, sans-serif !important; }</style><![endif]-->
</head>
<body style="font-family: Inter, Helvetica, Arial, sans-serif; margin: 0px; padding: 0px; background-color: #ffffff;">
    <span style="color: transparent; display: none; height: 0px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; visibility: hidden; width: 0px;">This is preheader and it will show as a preview in some mail clients.</span>
    <table cellpadding="0" cellspacing="0" border="0" width="100%" class="body" style="width: 100%;">
        <tbody>
            <tr>
                <td align="center" valign="top" style="vertical-align: top; line-height: 1; padding: 40px 5px 80px;">
                    <table cellpadding="0" cellspacing="0" border="0" width="600" class="main container" style="width: 600px; border-collapse: separate;">
                        <tr>
                            <td align="left" valign="top" bgcolor="#fff" style="vertical-align: top; line-height: 1; background-color: #ffffff; border-radius: 6px;">
                                <table cellpadding="0" cellspacing="0" border="0" width="100%" class="block" style="width: 100%; border-collapse: separate;">
                                    <tr>
                                        <td align="center" valign="top" bgcolor="#f2fff0" style="vertical-align: top; line-height: 1; padding: 52px; background-color: #f2fff0; border-radius: 10px;">
                                            <span style="display: inline-block; font-size: 0px; line-height: 0; vertical-align: top;"><a href="https://imperavi.com" target="_blank" style="font-family: Inter, Helvetica, Arial, sans-serif; font-size: 0px; font-weight: normal; color: #0091ff; text-decoration: none; cursor: pointer; line-height: 100%; display: block;"><img border="0" width="135" src="https://imperavi.com/_email2/revolvapp-logo.png" style="margin: 0px; padding: 0px; max-width: 100%; border: none; vertical-align: top; width: 135px;"></a></span>
                                            <p style="padding: 0px; margin: 48px 0px 0px; font-family: Inter, Helvetica, Arial, sans-serif; color: #919990; font-size: 12px; line-height: 18px; font-weight: bold;">
                                                NEWSLETTER
                                            </p>
                                            <h1 class="h1" style="padding: 0px; margin: 10px 0px 0px; font-style: normal; font-family: Inter, Helvetica, Arial, sans-serif; font-size: 32px; line-height: 39px; color: #111118; font-weight: bold;">
                                                Beautifully written<br class="mobile-hidden">
                                                 headline goes here
                                            </h1>
                                            <span style="display: inline-block; font-size: 0px; line-height: 0; vertical-align: top;"><img border="0" width="447" src="https://imperavi.com/_email2/photo-1.jpg" style="margin: 0px; padding: 0px; max-width: 100%; border: none; vertical-align: top; width: 447px;"></span>
                                            <p style="padding: 0px; margin: 0px 0px 36px; font-family: Inter, Helvetica, Arial, sans-serif; color: #222228; font-size: 16px; line-height: 24px;">
                                                The carbon in our apple pies Apollonius of Perga rich in mystery shores of the cosmic ocean inconspicuous motes of rock and gas Vangelis. Descended from astronomers permanence of the stars across the centuries preserve and cherish that pale blue dot ship of the imagination muse about.
                                            </p>
                                            <table cellpadding="0" cellspacing="0" border="0" width="auto" style="width: auto; font-size: 14px; font-weight: normal; background-color: #3c887e; color: #ffffff; border-radius: 3px; border-collapse: separate;">
                                                <tr>
                                                    <td align="center" valign="top" bgcolor="#3C887E" style="vertical-align: top; line-height: 1; text-align: center; font-family: Inter, Helvetica, Arial, sans-serif; border-radius: 3px;">
                                                        <a target="_blank" href="https://example.com" style="display: inline-block; box-sizing: border-box; cursor: pointer; text-decoration: none; margin: 0px; font-family: Inter, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; background-color: #3c887e; color: #ffffff; border-radius: 3px; border: 1px solid #3c887e; padding: 14px 40px;">CTA text</a>
                                                    </td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                </table>
                                <table cellpadding="0" cellspacing="0" border="0" width="100%" class="block" style="width: 100%;">
                                    <tr>
                                        <td align="left" valign="top" style="vertical-align: top; line-height: 1; padding: 50px 0px;">
                                            <h2 class="h2" align="center" style="padding: 0px; margin: 0px 0px 20px; font-style: normal; font-family: Inter, Helvetica, Arial, sans-serif; font-size: 28px; line-height: 37px; color: #111118; font-weight: bold;">
                                                Highlights
                                            </h2>
                                            <table cellpadding="0" cellspacing="0" border="0" width="100%" class="grid" style="width: 100%;">
                                                <tr>
                                                    <td align="left" valign="top" class="mobile column" style="vertical-align: top; line-height: 1; width: 260px; padding: 0px 0px 20px;">
                                                        <span style="display: inline-block; font-size: 0px; line-height: 0; vertical-align: top;"><a href="https://imperavi.com" target="_blank" style="font-family: Inter, Helvetica, Arial, sans-serif; font-size: 0px; font-weight: normal; color: #0091ff; text-decoration: none; cursor: pointer; line-height: 100%; display: block;"><img border="0" width="220" src="https://imperavi.com/_email2/photo-2.jpg" style="margin: 0px; padding: 0px; max-width: 100%; border: none; vertical-align: top; width: 220px;"></a></span>
                                                        <h3 class="h3" style="padding: 0px; margin: 10px 0px; font-style: normal; font-family: Inter, Helvetica, Arial, sans-serif; font-size: 20px; line-height: 28px; color: #111118; font-weight: bold;">
                                                            The ash of stellar alchemy stirred by starlight
                                                        </h3>
                                                        <p style="padding: 0px; margin: 0px; font-family: Inter, Helvetica, Arial, sans-serif; color: #58585d; font-size: 14px; line-height: 21px;">
                                                            With pretty stories for which there's little good evidence network of wormholes vanquish the impossible a mote of dust suspended in a sunbeam Drake Equation.
                                                        </p>
                                                    </td>
                                                    <td class="mobile-hidden column-spacer" style="width: 40px; min-width: 40px;">
                                                        &nbsp;
                                                    </td>
                                                    <td align="left" valign="top" class="mobile column" style="vertical-align: top; line-height: 1; width: 260px; padding: 0px 0px 20px;">
                                                        <span style="display: inline-block; font-size: 0px; line-height: 0; vertical-align: top;"><a href="https://imperavi.com" target="_blank" style="font-family: Inter, Helvetica, Arial, sans-serif; font-size: 0px; font-weight: normal; color: #0091ff; text-decoration: none; cursor: pointer; line-height: 100%; display: block;"><img border="0" width="220" src="https://imperavi.com/_email2/photo-3.jpg" style="margin: 0px; padding: 0px; max-width: 100%; border: none; vertical-align: top; width: 220px;"></a></span>
                                                        <h3 class="h3" style="padding: 0px; margin: 10px 0px; font-style: normal; font-family: Inter, Helvetica, Arial, sans-serif; font-size: 20px; line-height: 28px; color: #111118; font-weight: bold;">
                                                            Birth something incredible is waiting to be known
                                                        </h3>
                                                        <p style="padding: 0px; margin: 0px; font-family: Inter, Helvetica, Arial, sans-serif; color: #58585d; font-size: 14px; line-height: 21px;">
                                                            Encyclopaedia galactica two ghostly white figures in coveralls and helmets are soflty dancing colonies circumnavigated as a patch of light decipherment
                                                        </p>
                                                    </td>
                                                </tr>
                                            </table>
                                            <p align="center" style="margin: 40px 0px 20px; font-family: Inter, Helvetica, Arial, sans-serif;">
                                                <a target="_blank" href="https://example.com/link/" style="font-family: Inter, Helvetica, Arial, sans-serif; text-decoration: underline; color: #3c887e; font-size: 20px; font-weight: bold; line-height: 1.5;">Read more on our website</a>
                                            </p>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                    <table cellpadding="0" cellspacing="0" border="0" width="600" class="footer container" style="width: 600px; border-collapse: separate;">
                        <tr>
                            <td align="left" valign="top" bgcolor="#3A3238" style="vertical-align: top; line-height: 1; padding: 50px 60px 60px; background-color: #3a3238; border-radius: 6px;">
                                <table cellpadding="0" cellspacing="0" border="0" width="100%" class="block" style="width: 100%;">
                                    <tr>
                                        <td align="center" valign="top" style="vertical-align: top; line-height: 1;">
                                            <p style="padding: 0px; margin: 0px; font-family: Inter, Helvetica, Arial, sans-serif; color: #d7d6d7; font-size: 12px; line-height: 18px;">
                                                Copyright © 2020 Revolvapp<br>
                                                All rights reserved<br>
                                                <br>
                                                Revolvapp Inc, Espoo, Finland 02650
                                            </p>
                                            <div class="social" style="margin: 40px 0px;"><a href="https://facebook.com/"><img border="0" width="24px" alt="Facebook" src="https://imperavi.com/_email2/facebook-logo.png" style="margin: 0px; padding: 0px; max-width: 100%; border: none; vertical-align: top; width: 24px;"></a><span class="#222228" style="display: inline-block; line-height: 0; font-family: Inter, Helvetica, Arial, sans-serif; font-size: 16px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><a href="https://twitter.com/"><img border="0" width="24px" alt="Twitter" src="https://imperavi.com/_email2/twitter-logo.png" style="margin: 0px; padding: 0px; max-width: 100%; border: none; vertical-align: top; width: 24px;"></a><span class="#222228" style="display: inline-block; line-height: 0; font-family: Inter, Helvetica, Arial, sans-serif; font-size: 16px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><a href="https://instagram.com/"><img border="0" width="24px" alt="Instagram" src="https://imperavi.com/_email2/instagram-logo.png" style="margin: 0px; padding: 0px; max-width: 100%; border: none; vertical-align: top; width: 24px;"></a></div>
                                            <p style="padding: 0px; margin: 0px; font-family: Inter, Helvetica, Arial, sans-serif; color: #d7d6d7; font-size: 12px; line-height: 18px;">
                                                You subscribed to this newsletter because you agreed to receive our monthly news shot when you registered your email on <a href="https://example.com" style="color: #ffffff; font-size: 12px;">https://revolvapp.com</a>.To unsubscribe, click <a href="https://example.com" style="color: #ffffff; font-size: 12px;">Unsubscribe</a>.
                                            </p>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Integrate

Revolvapp is a Javascript application,
so it integrates easily with your CMS, website, SaaS etc.

Tested

All templates, blocks, and snippets tested on all major mail clients

Responsive

100% responsive emails both on the desktop and on mobile devices

These are examples of the kind of template you can create and edit in Revolvapp. They show the power and flexibility of Revolvapp.

Buy Revolvapp

One time-payment, not a subscription.

Build

Use simplified template syntax to create your emails faster.

See how to create the template in Revolvapp.

<re-main background-color="#fff" padding="36px 0">
    <re-block align="center" margin="20px 0">
        <re-heading>Heading</re-heading>
    </re-block>
    <re-block align="center" margin="20px 0">
        <re-text>Text</re-text>
    </re-block>
    <re-block align="center" margin="20px 0">
        <re-image src="image.jpg"></re-image>
    </re-block>
</re-main>

Add

Tonz of pre-made blocks and snippets in one click.

See how can add your own block.

Edit

Create emails visually and change everything you want.

Generate

Get the completely responsive emails and send them with your favorite mail-service.

Buy Revolvapp

One time-payment, not a subscription.

Buy Revolvapp

Discover

Revolvapp

Revolvapp uses a simplified
syntax to create HTML emails

Revolvapp can generate
HTML emails based on a template.

Revolvapp is a Javascript application,
so it integrates easily with your CMS, website, SaaS etc.

Tested

Responsive

Use simplified template syntax to create your emails faster.

Tonz of pre-made blocks and snippets in one click.

Create emails visually and change everything you want.

Get the completely responsive emails and send them with your favorite mail-service.

One time-payment, not a subscription.

Explore Revolvapp.

Documentation

Examples

Plugins

Revolvapp

Revolvapp uses a simplified syntax to create HTML emails

Revolvapp can generate HTML emails based on a template.

Revolvapp is a Javascript application, so it integrates easily with your CMS, website, SaaS etc.

Tested

Responsive

Use simplified template syntax to create your emails faster.

Tonz of pre-made blocks and snippets in one click.

Create emails visually and change everything you want.

Get the completely responsive emails and send them with your favorite mail-service.

One time-payment, not a subscription.

Explore Revolvapp.

Revolvapp uses a simplified
syntax to create HTML emails

Revolvapp can generate
HTML emails based on a template.

Revolvapp is a Javascript application,
so it integrates easily with your CMS, website, SaaS etc.