Case study

MailMaker AI

MailMaker AI is a personal project: a web-based visual email template builder so people can ship responsive, client-safe HTML without hand-writing MJML. It compiles MJML in the browser and targets compatibility across major email clients.

Visit live site

The Challenge (The “Why”)

I built MailMaker AI as a personal project to scratch my own itch: email HTML is fiddly, and I wanted a fast way to assemble layouts visually while still emitting markup that survives Outlook, Gmail, and the long tail of clients. The product had to feel like a real editor (add blocks, tweak styles, see results immediately) without asking users to learn MJML syntax up front.

The Technical Strategy (The “How”)

The app is a Next.js App Router project with React, Tailwind CSS, Framer Motion, and Lucide for UI. The editor centers on a Zustand store (for example lib/editor/store.ts) that holds the template as serialized JSON: a tree of MJElement nodes. Adding components from the left sidebar or editing properties in the right sidebar mutates that tree. A recursive transformer (lib/editor/transformer.ts) walks the JSON and produces a valid MJML string, which mjml-browser turns into email-safe HTML. The canvas renders that HTML inside an isolated iframe, with injected scripts so elements can be selected and hovered without leaking styles into the host app.

The Key Features & Contributions

Visual editor: click-to-add primitives (Text, Image, Button, Divider) and structural blocks (Sections, Columns)
Pre-built composite cards (signatures, testimonials, hero banners) for faster assembly
Live preview: MJML to HTML in real time inside a sandboxed iframe
Responsive testing: switch desktop and mobile viewports before sending
Context-aware property panel: select any canvas element to edit content, color, typography, and spacing
End-to-end pipeline: JSON state, MJML compilation, and secure iframe rendering with selection affordances

The Impact (The “Results”)

MailMaker lowers the barrier to production-quality campaigns and transactional layouts: designers get immediate feedback, and the MJML layer keeps output closer to what major clients expect than ad-hoc HTML alone.

Technical Stack

Next.js React Tailwind CSS MJML mjml-browser Zustand Framer Motion Lucide React