@templatical/editor

@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

npm install @templatical/editor

@templatical/renderer is an optional peer — install it only if you need to convert templates to MJML. The two common cases are:

• In the browser, alongside the editor, when you call editor.toMjml() to export from the user's session.
• In Node.js (or another runtime), when you only have stored template JSON and want to convert it to MJML server-side. You don't need the editor for this — install just the renderer.

npm install @templatical/renderer

If you call editor.toMjml() without the renderer installed, it throws a clear error naming the missing package.

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 — async; requires @templatical/renderer
const mjml = await 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

• Quick Start
• Editor API reference
• Block reference
• Theming
• Custom blocks

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.