Ivan Tarasov

Ivan Tarasov · Senior Frontend Engineer

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.