Why I Rewrote My Email Editor from Scratch: From Blocks to Atoms Rewrite

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 3 columns instead of 2? 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:

1. Block (The Root): The top-level section wrapper that handles full-width backgrounds and vertical spacing.
2. Row (The Grid): Defines the horizontal structure and manages column gaps and mobile collapsing logic.
3. Cell (The Flexible Container): The powerhouse of the layout. It controls alignment, dimensions, and—crucially—can contain nested Rows, allowing for complex, multi-level grid structures.
4. 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): For a reactive and modular UI.
• TypeScript: For a robust data schema (vital for complex email structures).
• Tailwind CSS: Using the latest v4 for blazing fast styling.
• Shadcn Vue: For accessible UI components.
• Clean Email Output: It 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.

But there is a deeper reason.

We live in an era of increasing vendor lock-in and centralized control. We have seen instances where entire regions are 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 to ensure that everyone has access to a powerful, self-hosted email builder.

If you’ve ever struggled with rigid email templates or want to see how we handle complex Drag-and-Drop in Vue 3, I’d love for you to check out the repo.

👉 Check it out here: github.com/mysigmail/card

I’m actively looking for feedback on the architecture and, of course, contributors are more than welcome!