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 runtime dependencies.
- TypeScript-first
- Built on MJML
- FSL-1.1-MIT (auto-MIT)
- Framework-neutral
- Shadow DOM
- No license key
- 312 kB initial · 253 kB lazy
Describe the email. Or the integration.
One open-source Agent Skill, running entirely inside the coding agent you already use. Ask it for an email and it writes, imports, validates and previews a complete template. Ask it about the SDK and it mounts the editor in your app, scaffolds the code, or works out why an integration misbehaves. No backend, no API key, nothing sent to us.
“A product-launch email for an outdoors brand — hero image, a short intro, and a Shop now button in forest green.”
- build
- edit
- import
- validate
- export
- live
“Mount the editor in our Next.js admin, point save and load at our own API, and match it to our dark theme.”
- integrate
- scaffold
- diagnose
- docs
One command. It detects the agents you have installed and writes the skill into the folder each one reads — nothing is added to your project.
Prefer managed AI? Templatical Cloud adds in-editor AI chat and a hosted MCP server. Explore Cloud
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
- A saved-block library — pick, name, preview, insert at position
- A test-send dialog — recipient picker, preview, sending and error states
- Preview resolution — real data in place of merge tags, without touching stored content
- 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)
- Saved blocks — users save block groups and reuse them, backed by your storage
- Saving and loading against your own storage — autosave, save status, Cmd/Ctrl+S
- Version history — browse, preview and restore, backed by your storage
- Threaded review comments anchored to blocks, on your storage and identities
- Test sends from the editor, delivered by your own ESP and your domain
- Previews resolved by your backend — real data, logic branches evaluated
- 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
- No license key, no activation call — nothing we can switch off remotely
Coming with Templatical Cloud
In development- AI rewrite, AI chat, MCP integration
- Real-time collaboration with block-level locking
- 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
- Reusable saved blocks gated to paid tiers — even self-hosted
- 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
- License key validated against the vendor’s servers — features enabled remotely by plan
- No CSS isolation — host styles can cascade into the embedded editor
Nothing to activate. Nothing to revoke.
No license key, no client ID, no activation call. The open-source SDK never asks a server which features you are allowed to use — install it once and it keeps working, unchanged, including if this project disappears tomorrow.
- No license key or client ID anywhere in the API
- No entitlement check — features are never enabled or revoked remotely
- No telemetry, no analytics, no usage reporting
- Your templates stay in your app until you send them to your own backend
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'
// No API key, no client ID — this is the whole integration
const editor = await init({
container: '#editor',
onChange(content) {
// JSON content — store, version, send anywhere
console.log(content)
},
})
const mjml = await editor.toMjml()