templatical-email

Templatical

Open-source drag-and-drop email editor for modern apps

Playground · Documentation · Website · Discussions

▶ Try it live in the playground

---

Templatical is a production-ready drag-and-drop email editor you can drop into any web app with a single function call. Templates are portable JSON, output is MJML (so they render correctly in every email client), and the editor itself is framework-agnostic — Vue under the hood, but you embed it in React, Svelte, Angular, or vanilla JS the same way. An optional Cloud tier is in development for AI rewrites, real-time collaboration, comments, snapshots, saved modules, multi-tenancy, test email sending, MCP support, and more.

Design a complete email from a prompt

Describe the email you want and your AI coding agent builds it — then preview it in the real editor, hand-edit anything, and export send-ready MJML/HTML. Free, open-source, no backend, no API key — your agent is the inference, and nothing is sent to us. Ship a one-off campaign, or generate branded starter templates for your @templatical/editor integration: if you have a coding agent, you have a complete email tool.

The templatical-email Agent Skill runs in Claude Code, Cursor, or any Agent Skills–compatible agent, and the email it exports sends through any provider — Amazon SES, Postmark, Resend, Mailchimp, anything.

# Claude Code
/plugin marketplace add templatical/sdk
/plugin install templatical-email@templatical

In Claude Code, you can also preview it live: ask to "show it live" and the skill opens your template in the real Templatical editor in a browser, updating it as you prompt and reconciling any edits you make by hand. It's local and adds no dependencies (a tiny Node bridge; the editor loads from the CDN).

Or copy skills/templatical-email/ into any agent's skills folder. Skill guide →

Want a hosted, managed experience instead — AI chat inside the editor, tuned prompts, an MCP server we run? That's the Templatical Cloud tier (below).

Power features

Things that are usually paid features in commercial editors — open-source in Templatical:

• Custom blocks with API-backed data sources — register your own block types whose content is rendered from a static template or fetched live from your API at preview time. Typically a paid-tier feature in commercial editors.
• Merge tags with pluggable syntax — {{handlebars}}, {liquid}, ${js}, or your own — with automatic human-readable label replacement directly in the editor canvas. Build your CRM-aware tag picker in minutes.
• Display conditions — show/hide blocks based on recipient attributes, with live preview in the editor.
• Full theming via design tokens — 27 OKLch tokens, custom fonts, dark mode, complete theme overrides. No CSS hacking, no paid tier.
• Template & block defaults — define your brand once. New templates and new blocks pick up your brand automatically.

And more