Kettlemail

A free, open-source drag-and-drop email template builder that survives Outlook.

🔗 Live demo: kettlemail.vercel.app

Build responsive email templates visually, tweak the underlying code when you need to, preview how each client renders them, send a real test email to yourself, and export production-ready HTML that works in Gmail, Outlook (desktop + web), Apple Mail, Yahoo, and major mobile clients.

The core idea: you never hand-write cross-client HTML — it's compiled to. Your design is a JSON document model that serializes to MJML and compiles, fully in your browser, to bulletproof table-based HTML (Outlook ghost tables, VML, media-query fallbacks — all generated). See ARCHITECTURE.md for the full design.

Features

• Drag-and-drop builder — sections, columns, text, buttons, images, dividers, spacers, social, navbar, tables, accordions, carousels, hero, and raw-HTML blocks.
• Compiles to bulletproof HTML via MJML — no email-client hacks to maintain.
• Preview + Client Lens — desktop/mobile widths, dark-mode simulation, and per-client degradation previews driven by the caniemail dataset.
• Compatibility linter — flags unsupported CSS per client and warns about Gmail's 102 KB clipping limit.
• Eyeline — a predicted-attention heatmap and scan path (an honest heuristic, not eye-tracking).
• Code mode — a round-trip MJML editor that stays in sync with the visual builder, plus raw-HTML blocks for merge tags.
• AI assistant (optional, needs an API key) — chat that redesigns your whole email, block-scoped Magic Edit, and AI subject lines (Inbox Studio). Everything the AI produces round-trips through the same strict MJML parser, so it can never generate an email the editor itself couldn't.
• Test sends (optional, needs an email provider) — send a real test email to your inbox for ground truth.
• Export — download .html, .mjml, or a re-importable .json, or copy to clipboard. No watermark, no locked features.

Templates are stored in your browser (IndexedDB) — no account, no server database. Export a .json backup to keep them safe or move them between machines.

Screenshots

The editor — three-pane visual builder

Drag blocks from the palette onto the canvas; edit the selected block in the settings panel.

Code mode — round-trip MJML editor

Edit the MJML directly and it stays in sync with the visual editor; the compiled HTML is viewable read-only.

Preview & Client Lens

Inbox preview, desktop/mobile widths, light/dark simulation, per-client degradation lenses, a compatibility count and a live Gmail 102 KB size meter.

Tech stack

Next.js (App Router) · TypeScript · Tailwind CSS v4 · zustand + zundo · @dnd-kit · mjml-browser · Dexie (IndexedDB) · CodeMirror 6 · zod.

Getting started

git clone https://github.com/farhan523/kettlemail.git
cd kettlemail
npm install
cp .env.example .env.local   # optional — see below
npm run dev

Open http://localhost:3000.

The builder, preview, linter, code mode, and export work with zero configuration. Two features need environment variables (all optional):

Feature	Env var(s)	Notes
AI assistant	GROK_API_KEY	A Groq key (gsk_…, free tier) or xAI key (xai-…). Provider is auto-detected.
Test-email sending	RESEND_API_KEY or SMTP_*	Use Resend (free tier) or any SMTP server.

See .env.example for the full list.

Scripts

npm run dev         # start the dev server
npm run build       # production build
npm run start       # serve the production build
npm run typecheck   # tsc --noEmit
npm run smoke              # quick pipeline smoke test
npm run verify:lens        # Client Lens degradation checks
npm run verify:attention   # Eyeline model invariants

Contributing

Contributions are welcome — see CONTRIBUTING.md. Please read ARCHITECTURE.md first; it's the single source of truth for the design, and the compile pipeline (§2.1) is the one rule that must never be broken.

License

MIT © 2026 Farhan Bajwa

Compatibility data from caniemail.com (CC BY-SA 4.0).