Modular Email Library | Evan O'Dacre

The actual production workspace. Brief → agent → review → export.

Internal production workspace — local coding-agent workflow, with manual HTML handoff to Klaviyo.

Problem

Building branded emails from scratch repeats design and development work. It also makes consistency and production checks harder to maintain across campaigns.

Approach

I separated brand identity, content, and presentation into reusable tokens, components, variants, layouts, sections, recipes, and templates. A Laravel workspace organizes brands, emails, components, recipes, and builds.

Workflow

Campaign brief → Brand & recipe → Agent-assisted build → MJML → Validate → Preview → Export

Inside the actual tool

From a clear brief to an email ready for review.

Three screens from the local application, showing the decisions behind the workflow. Select any screenshot to take a closer look.

Start with the campaign context.

Choose a brand, recipe, and style, then define the audience, objective, and approved content. The workspace prepares instructions for a local coding agent.

Design decision: Keep the brief and handoff requirements together, so the build starts with context.

Reuse the structure. Change the campaign.

Searchable components, category filters, and rendered previews make reusable blocks easier to find. Variants offer different treatments without rebuilding the underlying component.

Email component library with search, category and style filters, rendered block thumbnails and variant counts — **Design decision:** Show the rendered block alongside its purpose and variants. These previews use example content.

Keep checks next to the email.

Desktop and phone previews sit beside renderer diagnostics, HTML size, and export actions. This recipe preview shows a reusable starting point; agent-produced builds use the same review flow.

Welcome recipe preview with desktop and phone controls, checks-passed status, HTML size, diagnostics and HTML download — **Design decision:** Review the output and diagnostics in one place. Placeholder imagery and Klaviyo personalization tags are intentional in this example.

Email builder with editable campaign fields alongside a branded Fieldwork email preview

Try it yourself

Build a sample email

Choose a welcome or product-launch recipe, customize the copy and brand color, preview it on mobile, and download the HTML. A simplified browser demo of the ideas behind the full library.

This public demo uses browser-side HTML templates and basic checks. It illustrates the workflow without running the full MJML engine.

Try the email builder →

What I built

Reusable components, campaign recipes, themes, and brand systems, including a dedicated SanEcoTec email collection.
A brief-to-build workflow: choose a brand, recipe, and style; describe the campaign; generate a prompt; use a local coding agent to produce a structured build.
Automatic build discovery, searchable emails, desktop/mobile previews, warnings, downloads, and brand-specific organization.
A Nunjucks-to-MJML rendering pipeline with strict compilation and HTML export that preserves Klaviyo template tags.
Validation for component schemas, registry constraints, MJML compilation, template tags, image alt text, email size, Gmail clipping warnings, brand references, and draft isolation. Automated tests cover the engine and Laravel integration.

Why it matters

Reusable structures reduce repeated production work, while validation helps catch issues before an email reaches the platform. Campaign content can change without rebuilding the brand system each time.

Technology

Laravel, PHP, Node.js, Nunjucks, MJML, Tailwind, JavaScript, and Vite.

What was produced

Created a reusable workspace for producing validated, branded, responsive email HTML. The output is exported for manual import into Klaviyo; the system does not send campaigns or provide automated Klaviyo delivery. AI assistance comes from a local coding agent, rather than an AI API or SaaS product.

Let's talk

evanodacre@gmail.com