Why I Rewrote My Email Editor from Scratch: From Blocks to Atoms Rewrite
Source: Dev.to
Introduction
Hi there!
Six years ago, I launched MySigMail Card as a commercial product. To be honest, it didn’t take off as I hoped. I struggled to attract enough users to make it sustainable. Eventually, I lost motivation and abandoned it to focus on my other open‑source project, massCode.
For years, the project gathered dust. But besides the marketing struggles, it also had a ticking time bomb in its core architecture. It was built entirely on Presets.
The Problem: The “Preset Trap”
In the initial version, if a user wanted a header, they dragged a “Header Block”. If they wanted a testimonial, they dragged a “Testimonial Block”. Under the hood, these were rigid, hard‑coded HTML chunks.
This led to several dev nightmares:
- The Variation Explosion: Want the image on the right? I had to code a new block. Want three columns instead of two? Another block.
- The Maintenance Ceiling: I became the bottleneck. Every “small change” requested by users required me to push a code update.
- Rigid Data Structure: The JSON was tied to the visual representation, making migrations a headache.
The Solution: Embracing Atomic Design
I realized that to make the editor truly powerful, I had to decouple Layout from Content. I scrapped the old engine and rebuilt it using a recursive, hierarchical system:
- Block (The Root): Top‑level section wrapper that handles full‑width backgrounds and vertical spacing.
- Row (The Grid): Defines the horizontal structure and manages column gaps and mobile‑collapsing logic.
- Cell (The Flexible Container): Controls alignment, dimensions, and—crucially—can contain nested Rows, allowing for complex, multi‑level grid structures.
- Atom (The Content): The actual elements: Text, Image, Button, Menu, and Divider.
This recursive structure (Block → Row → Cell → Row …) means you aren’t limited to simple columns. You can build advanced layouts like “Sidebar + Main Content” or complex product grids without writing a single line of code.
The Tech Stack
I wanted this version to be modern, fast, and developer‑friendly:
- Vue 3 (Composition API): Reactive and modular UI.
- TypeScript: Robust data schema, vital for complex email structures.
- Tailwind CSS: Using the latest v4 for blazing‑fast styling.
- Shadcn Vue: Accessible UI components.
- Clean Email Output: Generates production‑ready, table‑based HTML that actually works in Outlook.
Why Open Source?
I’m building this in public as an Open Source project (AGPL‑3.0).
Why? First, because I believe the world needs a powerful, embeddable email builder that isn’t locked behind a $500/month SaaS subscription.
There’s a deeper reason, too. We live in an era of increasing vendor lock‑in and centralized control. Entire regions can be cut off from services due to geopolitical reasons, leaving developers and users stranded. Software should be accessible and reliable, regardless of borders.
Driven by a passion for open source, I want to provide a truly independent alternative so everyone has access to a powerful, self‑hosted email builder.
Get Involved
If you’ve ever struggled with rigid email templates or want to see how we handle complex drag‑and‑drop in Vue 3, check out the repo:
I’m actively looking for feedback on the architecture, and contributors are more than welcome!