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

• Drop-in mount — one init() call, one unmount(). No framework lock-in.
• Style-isolated, both directions — Shadow DOM by default keeps host CSS out of the editor; tpl: Tailwind prefix and no preflight reset keep editor styles out of your app. Drops into any page, any framework, any CMS — no resets, no conflicts. Learn more →
• 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.
• Multilingual — English, German, Portuguese, Spanish & Catalan 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.

Quick Start

npm install @templatical/editor @templatical/renderer

import { init } from "@templatical/editor";
import "@templatical/editor/style.css";

const editor = await init({
  container: "#editor",
  onChange(content) {
    // content is JSON — store it, version it, send it anywhere
    console.log("Template updated:", content);
  },
});

// Render to MJML when you're ready to send
const mjml = await editor.toMjml();

<div id="editor" style="height: 100vh"></div>

Read the full guide → · React, Svelte, Angular examples →

Packages

Package	Description	License
@templatical/editor	Visual drag-and-drop editor	FSL-1.1-MIT
@templatical/core	Framework-agnostic editor logic, state, history	FSL-1.1-MIT
@templatical/media-library	Media library — composable, components, standalone SDK	FSL-1.1-MIT
@templatical/types	Shared TypeScript types and block factories	MIT
@templatical/renderer	JSON → MJML → HTML renderer (browser + Node)	MIT
@templatical/quality	Accessibility linter for templates (browser + Node)	MIT
@templatical/import-beefree	Convert BeeFree templates to Templatical format	MIT
@templatical/import-unlayer	Convert Unlayer templates to Templatical format	MIT
@templatical/import-html	Convert HTML email templates (table-based) to Templatical format	MIT

Why FSL-1.1-MIT?

Editor packages (@templatical/editor, @templatical/core, @templatical/media-library) are licensed under Functional Source License 1.1, which automatically converts to MIT after 2 years per release. You can:

• ✅ Embed it in your SaaS, CRM, marketing tool, or transactional product
• ✅ Self-host, modify, fork for internal use
• ✅ Use it commercially without paying anything

The only restriction: don't repackage Templatical itself as a directly competing email-editor product. Renderers, types, and importers are pure MIT.

Full license FAQ →

Documentation

• Getting Started — install, mount, render
• Block Reference — all 14 block types
• Theming — design tokens, dark mode, custom fonts
• Custom Blocks — extend with your own
• AI Agent Skill — generate emails from a prompt in your own agent
• Cloud (AI, Collab, Comments) — optional managed tier
• Migrating from BeeFree
• Migrating from Unlayer
• Migrating from HTML

Full docs: docs.templatical.com (English + Deutsch).

Contributing

Contributions, bug reports, and feature requests are welcome.

git clone https://github.com/templatical/sdk.git
cd sdk
pnpm install
pnpm run build
pnpm run test

See CONTRIBUTING.md for the full guide.

Sponsors

Templatical is built and maintained by a solo developer. If your company uses it in production, consider sponsoring on GitHub — it directly funds new features, faster releases, and continued open development.

License

• Editor packages (@templatical/editor, @templatical/core, @templatical/media-library) — FSL-1.1-MIT
• Types, renderer, importers — MIT