Use the Email Editor

The email editor is where you build and customize your templates. Templated offers two editing modes to suit different workflows: a visual drag-and-drop editor and an HTML code editor.

Editor Modes

Templated provides two ways to edit your email templates:

Visual Editor — A drag-and-drop canvas where you build emails using blocks. This is the default mode when you create a blank template.
HTML Editor — A code editor powered by CodeMirror where you write and edit raw HTML directly. This mode is available when you import an HTML template.

The mode is determined when you create or import a template. Visual templates open in the drag-and-drop editor, and HTML templates open in the code editor.

Visual Editor Layout

The visual editor is divided into four areas:

Toolbar (top) — Template name, save, undo/redo, preview, import, and export controls.
Block Palette (left sidebar) — All available block types you can drag onto the canvas.
Canvas (center) — The visual editing area where you build your email.
Settings Panel (right sidebar) — Context-sensitive options for the currently selected block.

HTML Editor Layout

The HTML editor has a streamlined layout:

Toolbar (top) — Template name, download, and save controls. An "HTML Editor" badge confirms you are in code mode.
Code Area (center) — A full-screen code editor with syntax highlighting for writing HTML directly.

In the HTML editor, click Download to save your template as an .html file to your computer.

Select and Edit Blocks

In the visual editor, click any block on the canvas to select it. A highlight outline appears around the selected block, and the settings panel updates to show that block's configuration options.

For blocks with editable text (like text blocks and buttons), double-click to enter inline editing mode. You can type and format content directly on the canvas.

Drag and Drop

To add a new block, drag it from the Block Palette on the left and drop it onto the canvas. A visual indicator shows where the block will be placed.

To rearrange existing blocks, drag them within the canvas and drop them in a new position. You can also drag blocks into containers, rows, and columns to build more complex layouts.

The Settings Panel

When you select a block, the settings panel on the right shows all its configurable properties. Depending on the block type, you may see:

Color pickers for text, backgrounds, and borders
Spacing controls for padding and margin
Alignment options (left, center, right)
Typography settings (font family, size)
Responsive settings for mobile-specific behavior

Changes apply in real time — you see the result on the canvas as you adjust settings.

Undo and Redo

Made a change you want to reverse? Use the undo and redo buttons in the toolbar, or use keyboard shortcuts:

Undo — Cmd+Z (Mac) or Ctrl+Z (Windows)
Redo — Cmd+Shift+Z (Mac) or Ctrl+Shift+Z (Windows)

Undo and redo are available in the visual editor. In the HTML editor, use your browser's standard undo and redo shortcuts.

Save Your Work

Click the Save button in the toolbar to save your template. The save status indicator next to the button shows:

Saving... — Your template is being saved.
Saved — All changes are saved.
Unsaved changes — You have changes that have not been saved yet.
Save failed — The save did not complete. Try again.

Responsive Preview

In the visual editor, toggle between desktop and mobile views using the responsive preview controls. This lets you see how your email renders on different screen sizes. Many blocks offer mobile-specific settings — such as hiding a block on mobile, adjusting font sizes, or changing how columns stack — that you can configure in the settings panel.

Add and Format Text
Add a Button
Add an Image
Create Multi-Column Layouts
Export and Import Templates