CASE STUDY 05 · SaaS
MailCraft
Email templates that survive Outlook, built like software.
Multi-tenant email template builder with a Monaco code editor, Inky/SCSS compilation, multi-device preview, an AI assistant, and 2FA team collaboration.
3
preview targets (desktop, mobile, plain text)
2FA
team workspaces, multi-tenant
1
compile pipeline replacing per-campaign hand-tuning
THE PROBLEM
HTML email is where web standards go to die — table layouts, inlined styles, and a rendering matrix where Outlook still uses Word's engine. Teams either fight this by hand per campaign or click together templates in drag-and-drop builders that produce markup nobody can maintain.
The developers who could treat email as code had no tooling that felt like code: no real editor, no compilation step, no versioned source.
WHAT I BUILT
An email development environment: write templates in Inky (Foundation's email component language) with SCSS in a full Monaco editor, and the platform compiles to battle-tested table HTML with styles inlined.
Around the editor: multi-device preview (desktop/mobile/plain-text), a Gemini-backed assistant for generating and editing template code, and multi-tenant team workspaces with 2FA.
ARCHITECTURE
React SPA
├─ Monaco editor (Inky + SCSS)
└─ live preview panes (desktop / mobile / text)
│ compile on change
▼
Node.js API
├─ Inky → table-HTML transform
├─ SCSS → CSS → inliner pipeline
├─ Gemini assistant (template-aware prompts)
└─ PostgreSQL ── tenants, teams, template versions- The compile pipeline is the product: Inky components expand to table markup, SCSS compiles and gets inlined, and the output is the ugly-but-bulletproof HTML that email clients actually render.
- The AI assistant operates on the template source, not the output — it speaks Inky/SCSS, so its edits stay maintainable instead of producing another blob of table soup.
- Templates are versioned like code; teams share workspaces with role-based access behind 2FA.
STACK — AND WHY
React
Editor-heavy UI with lots of coordinated panes.
Monaco
The real VS Code editor — syntax highlighting, autocomplete, and find/replace for template source.
Inky + SCSS
Foundation's email language compiles readable components into client-safe table HTML.
Node.js
The compile pipeline (Inky transform, SCSS, CSS inlining) is all JavaScript-native tooling.
THE HARD PARTS
The email rendering matrix
Outlook renders with Word, Gmail strips <style> in some contexts, and mobile clients disagree about widths. The compiler pipeline encodes these constraints once — media-query fallbacks, MSO conditionals, inlined styles — so template authors never hand-write them.
Live preview that tells the truth
A preview that renders in a modern browser lies to you about Outlook. The preview panes render the compiled output (not the source) with client-specific CSS constraints applied, which is honest enough to catch most breakage before a send.
An AI assistant that doesn't wreck the codebase
Naive LLM edits to email HTML produce unmaintainable output. Scoping the assistant to Inky source — with the component vocabulary in its context — keeps generated code in the same language humans edit.
WHAT IT TAUGHT ME
- Treating email as a compilation target — source language in, hostile-environment output — is the only sane model for the medium.
- AI assistants are dramatically more useful when scoped to a constrained language they can't make a mess in.