An open-source drag-and-drop email editor SDK.
Custom blocks, full theming, merge tags, and display conditions — all built into the open-source SDK. Drop into any app with one init() call.
Works in React, Svelte, Angular, Vue, and vanilla JS — one init() call, zero peer dependencies.
- TypeScript-first
- Built on MJML
- FSL-1.1-MIT (auto-MIT)
- Framework-neutral
- Shadow DOM
- Zero telemetry
- 148 kB initial · 259 kB lazy
Everything you need, nothing paywalled
Building from scratch takes a quarter of engineering. SaaS builders charge per seat and gate the features that matter. Templatical includes them — open source, self-hosted, ready to embed.
Build it yourself
Wire up an open-source web-builder framework with an MJML plugin, or compose React Email components yourself.
You’ll build yourself
- The editor UX itself — drag-and-drop, nesting, column splits, undo/redo
- Block-level merge tag scoping
- Display conditions with live preview
- Custom block SDK with API-backed data sources
- Editor-to-media-library glue — picker, image-block hook, replace flow
- Dark-mode preview parity with sent email
- Theme tokens for brand consistency
- MJML output you can render anywhere
- Email-client compatibility — Outlook 2007–365, Gmail clipping, Apple Mail
- Accessibility — keyboard nav, ARIA, screen readers
- Style isolation — host CSS resets and design-system globals bleed into the editor
- Ongoing maintenance — every email-client tweak is a regression risk
Recommended — Templatical
A purpose-built, open-source email editor SDK. Own the experience, ship in days not quarters, never hit a paywall on core features.
Included in the open-source SDK
- Custom blocks with API-backed data sources
- Block-level merge tags with scoping
- Display conditions for dynamic content
- Pluggable media library — bring your own storage (S3, Cloudinary, your CMS)
- Full theming via design tokens, dark mode included
- White-label by default — your UI, your brand
- MJML output — render in browser, on your server, anywhere
- Built-in WCAG accessibility linting with auto-fixes
- Style-isolated — Shadow DOM mount keeps host CSS out
Coming with Templatical Cloud
In development- AI rewrite, AI chat, MCP integration
- Real-time collaboration with block-level locking
- Snapshots and version history
- Multi-tenancy and API access
SaaS builders
Drop in a hosted editor component pointing at a vendor’s rendering API.
Paywalled or restricted
- Custom blocks gated to higher paid tiers
- Display conditions gated to higher paid tiers
- Custom theming and design tokens on higher tiers
- White-label and brand removal on enterprise tiers
- Custom merge-tag syntax (Liquid, Handlebars) paywalled
- Template and block defaults gated to paid tiers
- Pluggable media library — locked to vendor’s storage
- Per-seat or per-end-user pricing scales with you
- Closed source — cannot audit, fork, or extend
- Output coupled to the vendor’s render API
- No CSS isolation — host styles can cascade into the embedded editor
Things developers ask first
You can use Templatical commercially, embed it in your product, charge customers for your product, and self-host it — all today, free. The only restriction is you can’t resell Templatical as a competing email-editor product. After two years, every release auto-converts to plain MIT.
Ship an email editor this week
One npm install. One init() call. JSON in, MJML out — render anywhere, free.
import { init } from '@templatical/editor'
import '@templatical/editor/style.css'
const editor = await init({
container: '#editor',
onChange(content) {
// JSON content — store, version, send anywhere
console.log(content)
},
})
const mjml = await editor.toMjml()