Visual mode

Visual mode is the default editor surface. You drag blocks from the left sidebar onto the canvas, click any element to edit it inline, and tune layout and style from the right-hand property panel.

Anatomy of the editor

• Left sidebar — module library. Drag a section, column, or block onto the canvas.
• Canvas (center) — your email as it will render. Click any element to select it.
• Right sidebar — properties for the selected element (colors, spacing, alignment, link, etc.).
• Top toolbar — Visual / Code / Chat mode switcher, Files button, Settings, Send Test.

Adding content

Three ways to insert a new section or block:

1. Drag from the sidebar. Grab a module, drop it where you want it. A blue bar shows the drop position.
2. Click an empty section. A 4-column menu appears with content types (text, image, button, divider, …), plus AI content, Module, and File chips. Pick one and it inserts in place.
3. Press a keyboard shortcut while the empty-section menu is open. Each chip has a single-letter shortcut shown in the corner.

Editing inline

• Text — click to enter edit mode. A floating toolbar above the selection has bold, italic, alignment, color, link, emoji, merge tags, and AI rewrite actions.
• Buttons — click to edit the label inline. The right panel exposes link URL, button color, alignment, padding.
• Images — click to select. The format toolbar offers alignment, replace image (opens the media library), and — for images hosted on your account — Edit image to crop, resize, or annotate without leaving the editor.
• Social icons — click any icon or the parent block. The format toolbar sets layout (horizontal/vertical), alignment, and a bulk background color for all icons at once.

Selecting and reordering

• Click any element to select it. The right sidebar updates to that element's properties.
• A selected section shows a drag handle on the left. Use it to move the section up or down — or open the section menu for Move Up / Move Down / Duplicate / Delete / Save as Module / AI content toggle.
• Use the breadcrumb above the property panel to jump from a selected element up to its column or section.

Right-click and context menus

• Right-click a section to open the section menu without selecting it first.
• Right-click an element for element-specific actions (duplicate, delete).

Mobile preview

The canvas previews at desktop width by default. Toggle the mobile preview from the toolbar to verify how your email behaves on smaller screens. MJML automatically stacks columns on narrow viewports — you don't need to set media queries.

When to leave Visual mode

For most edits you'll never leave Visual mode. Switch to Code mode when you want to paste MJML from somewhere else, fine-tune attributes that aren't exposed in the property panel, or copy a template for use elsewhere. Your visual edits stay in sync — switching modes is lossless.