Developing an Email Newsletter Builder
An email newsletter builder — a drag-and-drop editor for creating HTML emails without HTML/CSS knowledge. Reference points: Mailchimp Email Designer, Stripo.email, Brevo (Sendinblue). Developed as a built-in tool for a platform or as a standalone SaaS.
Technical Constraints of Email
An email editor must output HTML compatible with email clients — they support different CSS subsets. Main limitations:
- Outlook 2016–2021: renders via Word, no flexbox/grid support
- Gmail: cuts emails > 102 KB, inlines only part of CSS
-
Apple Mail: supports
prefers-color-scheme, modern CSS
Therefore, any drag-and-drop editor generates table-based layout with inline styles — the only reliable format.
Editor Architecture
The editor works with a JSON structure of the email:
{
"rows": [
{
"id": "row_1",
"columns": 1,
"backgroundColor": "#ffffff",
"blocks": [
{
"type": "image",
"src": "https://cdn.../banner.jpg",
"alt": "Banner",
"link": "https://example.com",
"width": "100%"
}
]
},
{
"id": "row_2",
"columns": 2,
"blocks": [
{ "type": "text", "content": "<h2>Heading</h2><p>Text...</p>" },
{ "type": "button", "text": "Buy", "link": "...", "bgColor": "#2563eb" }
]
}
]
}
An HTML generator converts JSON to table-based HTML with inline styles.
Personalization (Merge Tags)
Support for variables in content: {{first_name}}, {{company}}, {{unsubscribe_url}}. When sending, variables are replaced with real data from the database or via email provider API.
Most providers (Mailchimp, SendGrid, Postmark) support their own merge tag format — adaptation is needed during export.
Preview and Testing
-
Desktop / Mobile preview — toggle in editor (min-width media query +
@media (max-width: 600px)for mobile) - Test send — sending a test email to a specified address
- Inbox preview — via Litmus or Email on Acid API: screenshots in all clients
Export
- HTML — ready inline-styled HTML
- Stripo JSON / MJML — for re-editing in other tools
- ZIP — HTML + images
MJML — a framework for email markup. MJML code compiles to cross-client compatible HTML. Using MJML within the editor significantly simplifies development:
<mjml>
<mj-body>
<mj-section background-color="#ffffff">
<mj-column>
<mj-text font-size="24px" font-weight="bold">Hello, {{name}}!</mj-text>
<mj-button href="https://example.com" background-color="#2563eb">
Go to
</mj-button>
</mj-column>
</mj-section>
</mj-body>
</mjml>
Template Library
Starter templates by type: welcome email, promo offer, news digest, order confirmation, abandoned cart. Templates are edited in the builder.
Timeline
MVP (drag-and-drop editor, basic blocks, preview, HTML export): 6–8 weeks. Full-featured builder with MJML engine, template library, Litmus integration, merge tags: 3–4 months.