Overview

Welcome to the Composa email editor! This guide will help you understand the core features and layout of the editor, so you can create beautiful, responsive email templates with ease.

Editor Views

The Composa editor offers three distinct view modes to suit your workflow, whether you prefer visual design or hands-on coding.

Visual Editor

The Visual Editor is a drag-and-drop MJML builder that makes it easy to design emails without writing code. You can drag components from the left panel onto the canvas, arrange them, and customize their properties in real-time. This is the default view and perfect for designers and non-technical users.

Code View

For developers and advanced users, the Code View provides a raw MJML editor where you can write and edit email markup directly. All changes sync instantly with the visual editor, so switching between views is seamless.

Preview

The Preview mode lets you see how your email will look to recipients. You can toggle between desktop and mobile responsive views, and test both light and dark mode rendering to ensure your template looks great everywhere.

Editor Layout

The Composa editor is organized into three main sections:

Left Panel (Element Palette) Contains all available elements and components for building your template. When using a design system, this shows EDS Components organized by category (header, content, CTA, footer, container, styles) plus pre-built Layouts. When starting from scratch, you'll see Layouts and Basic elements to get you started.

Center (Canvas) Your main design workspace. Drag elements from the left panel here to build your email. Click any element on the canvas to select it and edit its properties.

Right Panel (Element Properties) When you select an element, this panel shows all available customization options. You can edit text content, colors, padding, fonts, images, links, and more without touching code.

Top Toolbar

The toolbar at the top of the editor provides quick access to essential functions:

• Save: Manually save your template (though autosave handles this automatically)

• Undo/Redo: Step back or forward through your changes

• Preview Toggle: Switch to preview mode to see your email rendered

• Desktop/Mobile Toggle: View responsive breakpoints in preview mode

• Export: Download your template, send test emails, or export to connected platforms

• View Mode Switcher: Toggle between Visual Editor, Code View, and Preview

Autosave

Your templates are automatically saved every 30 seconds and immediately after you make changes. A visual indicator near the save button shows the autosave status, so you always know your work is secure. No more worrying about losing changes!

What's Next?

Ready to dive deeper? Check out these guides to master specific features:

• Visual Editor Guide: Learn how to drag, drop, and customize elements

• Previewing and Exporting: Test your templates and export them to your email platform