Outline
Introduction
Top Bar Overview
Document name & breadcrumbs
View mode switch (Body / Preview)
Undo / Redo / Zoom
Preview / Share / Export
Account & Settings
Left Sidebar Functions
Modules Panel
Layout Tree
Structure View
Right Sidebar Settings
Email content width
Background and style options
Responsive settings (if visible)
Canvas Area (Main Email Preview)
Add & rearrange blocks
Inline editing and styling
Drag-and-drop interactions
Tips & Best Practices for New Users
What to check first
Previewing and testing before export
Conclusion
Summary
Link to related tutorials or guides
This article provides a complete visual overview of the Email Editor interface in Chamaileon. It focuses on what you can see on screen — icons, panels, buttons, and dropdowns and explains what each one does.
Whether you're new to the platform or needs a refresher, this UI walkthrough will help you recognize and describe every part of the email editor.
If you're looking for tips on how to use features, check out our separate Chamaileon's Email Editor Overview instead.
1. The Top Bar
The top section of the editor acts as the main control hub. It's where you can manage file-level actions, switch views, and access essential tools like preview and export.
Here’s a breakdown of what you’ll find in the top bar (from left to right):
Top-Left: Document Title & Navigation ✍️
Navigation
At the top-left corner there is a left-arrow button, navigating back to the dashboard/current folder.
Document Title/Name
Next to it you’ll see the name of your current email (e.g.,
newsletter*) at the top left.If the asterisk (*) is present in the email's name, that means it was duplicated and a copy of another email with the same name (without the asterisk).
You can edit the name by double-clicking on it.
Subject Line & Preview Text
Next to the name there is an icon representing the Subject line & Preview text of the email/template that you can edit from here and other places, like the export workflow.
Top-Middle: Email-level Editing Buttons
AI Assistant 🪄
Visible as a magic wand icon, this tool can support content creation, edits, or translation directly within the editor. More about the feature here.
Undo / Redo ↩️
These buttons allow you to quickly revert or reapply recent changes.
Zoom Control 🔍
Use the zoom dropdown (default is 100%) to adjust the editor scale. Helpful for designing pixel-perfect layouts or see the email as a whole.
Top-right: Action buttons
Preview Button 👁️
The Preview button opens a live visual of your current email design, outside of edit mode. It consists a mobile (default) and a desktop view, with dark/light color mode switch.
Share Button 🌐
Share lets you collaborate with team members. There are three options revealed in a dropdown by clicking the button:
Get shareable link - enables you the generate a public link you can share for the email's preview.
Send test email - let's you send test emails.
Request a review - it starts the Review&Approval workflow for this email design.
Export Button 📤
A dropdown shows up with two options.
Export offers several options — export as HTML, download the file, or push to your ESP (if integrations are set up).
Sync synchronizes the email with your selected ESP/CRM, that was set up as an integration.
Kebab Menu
In the top-right corner the three vertical dots is a menu for accessing the
Help Center (this documentation)
and the Email Properties menu.
2. Secondary Menubar
This horizontal strip sits right under the top toolbar. It helps you stay oriented in the editor — where you are, and who’s with you.
Chamaileon Logo @
On the left side, you’ll find the Chamaileon logo.
Fun fact: the dot inside the “@” sign follows your mouse cursor. A small easter egg that makes the interface feel a bit more alive and fun.
Editor Navigational Breadcrumbs
Next to the logo, a label tells you what part of the email actively selected, for example, Body > Multicolumn > Text.
That's really important to know for keeping the email structure simple and navigate within overlapping elements.
Live Collaboration Avatars 👥
On the far right of this bar, you’ll see avatars representing who is currently viewing or editing the email in real time.
If you’re working with teammates, you’ll see their icons here in real-time making it easy to know who else is active in the same document. Their cursor (selected elements) appear with the same color within the editor canvas that color is encircling their avatar image.
3. Dynamic Element Toolbar
This is the third horizontal bar in the Email Editor interface.
It gives users quick access to content editing options, and a shortcut to open the right-side properties panel.
For content contributors and team members who don't need to edit the design this toolbar is the main editing interface without seeing the design properties.
Contextual Editing Options (Dynamic) ✏️
Depending on the selected element, the toolbar dynamically updates to show the relevant actions. Here are the elements affected:
Image: Add /replace image (change image source), Edit image with the built-in editor (resize, crop, cut, filters, etc), Add image from Design System elements, Edit alt text, Add link to the image.
Dynamic image: Source, alt text, link
Button: link
Video: Video link/source, Alt text
Details Toggle (Gear Icon) ⚙️
On the far right of this bar, you’ll find the Details icon with a small gear.
Clicking this toggles the Right Sidebar, which shows the full set of properties for the selected element (like padding, borders, background color, mobile visibility, etc.).
Toggling it off hides the right-side panel to give you more space for editing.