@templatical/editor

Vue 3 visual drag-and-drop email editor — drop into any web app with one function call.

The visual editor for Templatical — an open-source drag-and-drop email editor with JSON templates and MJML output.

🧩 14 block types — title, paragraph, image, button, section, divider, spacer, social icons, menu, table, HTML, video, countdown, custom
🎨 27 design tokens — full theming, dark mode, custom fonts
🔌 Framework-agnostic — works in React, Vue, Svelte, Angular, vanilla
📦 JSON in, MJML out — portable templates, render with any email provider
🌍 Bilingual — English + German built in
🔒 TypeScript strict — full type safety end to end

Install

Install the editor alongside @templatical/renderer — the renderer is what enables editor.toMjml() (the editor auto-detects it at runtime).

npm install @templatical/editor @templatical/renderer

Usage

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

const editor = await init({
  container: '#editor',
  onChange(content) {
    // content is JSON — store/version/sync however you want
  },
});

// Render to MJML when sending email
const mjml = editor.toMjml();

// Always unmount when removing the editor (cleans up listeners + DOM)
editor.unmount();

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

Framework integration

First-class examples for React, Vue, Svelte, Angular, and vanilla JS are in the installation guide.

Cloud features

For AI rewrite, real-time collaboration, comments, snapshots, and saved modules, use initCloud() instead. See the Cloud guide.

Documentation

Full docs at docs.templatical.com.

License

FSL-1.1-MIT — free for any non-competing commercial use, automatically converts to MIT after 2 years per release. License FAQ.