Templatical

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.

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:

• Drop-in mount — one init() call, one unmount(). No framework lock-in.
• 14 block types — Title, Paragraph, Image, Button, Section, Divider, Spacer, Social Icons, Menu, Table, HTML, Video, Countdown, Custom.
• JSON templates — portable, versionable, store anywhere, render anywhere.
• MJML output — works with any email provider (Postmark, Resend, SES, Mailgun, anything).
• Framework-agnostic — first-class examples for React, Vue, Svelte, Angular, vanilla.
• Tailwind 4 with tpl: prefix — no preflight reset, no style leaks into your app.
• Bilingual — en/de built in, easy to add more locales.
• TypeScript strict — full types for blocks, config, and callbacks.
• Battle-tested — ~1,400 unit tests + Playwright E2E coverage.