Emails generator — one system instead of a thousand files
Nox Labs · 2025 · Senior Frontend Engineer
- TypeScript
- Next.js
- React
- MJML
- React Hook Form
- Zod
- Tailwind CSS
- next-intl
- Turborepo
Context
Every product at the company needed its own set of branded transactional emails, and all of them were maintained by hand: table layouts, inline styles and per-client quirks that break the moment someone touches them. Each new template — and each new brand — multiplied the copies. Nobody owned the problem, so I took it: I proposed and built a system that generates emails instead of storing them.
What I did
- Designed an abstract syntax tree for emails: a template is a tree of typed nodes that compiles to MJML and down to bulletproof HTML that renders correctly in every email client — a template is data, not markup.
- Pushed type safety down to the values: branded types for colors and spacing, and a theme model built on nested design tokens — an invalid value is a compile error, not a broken email in a client nobody tested.
- Separated structure from skin: the same AST renders under any UI theme, so thousands of themed templates can be generated on the fly for a new project or brand — adding a brand means adding a token set, not forking templates.
- Built the authoring app around it: a form drives the AST and the compiled result renders live in a sandboxed preview with desktop and mobile modes — non-developers assemble production emails themselves.
- Added round-tripping: templates export to and import from JSON and download as ready-to-send HTML — versionable, shareable, reproducible.
Outcome
Producing an email stopped being a developer task. The hundreds of templates the company's projects need are created by managers in a web interface in minutes — work that used to queue up as routine tickets and burn engineering time now happens without a developer in the loop. Any project plugs its theme into the system and gets a full set of consistent, client-safe templates; one system serves every brand instead of every brand maintaining its own markup.