@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

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.