Dynamic Composer
Use the Dynamic Composer for a designed email with responsive sections, columns and content blocks. The visual editor lets your team inspect the layout while maxclicks compiles its MJML into HTML for email clients.
A new email is not blank. It starts with a brand logo block (only when your brand kit has a logo) and a Hello! text block. The editor saves as you type.
Structure
Content nests in three levels.
| Level | Role |
|---|---|
| Section | Full-width horizontal row. Holds columns and blocks. |
| Column | Side-by-side region inside a section. |
| Block | A single piece of content inside a section or column. |
Blocks
| Block | Content |
|---|---|
text | Paragraphs and headings (H1 to H6), bulleted and numbered lists. |
button | Call-to-action with text, link, colors, border, radius, padding, font, alignment. |
image | Uploaded or external URL, alt text, width, height, alignment, Fluid on mobile. |
divider | Line color, style (solid, dashed, dotted), thickness, surrounding spacing. |
spacer | Fixed vertical height in pixels. |
youtube video | A YouTube URL rendered as a static, clickable thumbnail card. |
x post | An X post rendered as a static card: author, handle, avatar, text. |
link preview | A link rendered as a preview card: image, title, description, site name. |
liquid | Raw Liquid inline or as a Liquid Tag Section. |
All blocks accept Liquid and Adaptyle syntax.
Adding blocks
Three ways to insert:
- Hover an existing block and click the
+icon. - Use the toolbar above the editor.
- Type
/to open the slash menu.
The slash menu groups items:
| Group | Items |
|---|---|
| Text | Text, Heading 1 to 6, Bulleted list, Numbered list |
| Media | Image, YouTube Video, X Post, Link Preview |
| Layout | Section, Button, Divider, Spacer |
| Utility | Variable, If Condition, For Loop, Liquid Section, Liquid Tag Inline, Assign Variable |
Type to filter. Arrow keys move, Enter confirms.
Sections
Hover a section to reveal its + button. Click it to insert after, or Alt-click (Option-click on macOS) to insert before. Two types:
- Content Section: standard container for blocks and columns.
- Liquid Tag Section: a section driven by raw Liquid.
Sections take a background color or image, padding, borders, and spacing.
Select several sections and choose Wrap Sections to group them, so one background color or pattern runs across the whole group. Unwrap Sections undoes it.
Columns
Add a column inside a section from the + button on an existing column. It offers Content Column and Liquid Tag Column, inserting after the hovered column, or before it with Alt (Option on macOS) and click. Drag a column by its handle to move it beside another column. Drag the divider between columns to resize.
Each column has one Width field that takes a pixel or percentage value (200px or 50%). Percentage widths stay responsive as the email resizes.
Select columns and choose Wrap Columns to keep them side by side as a group. Unwrap Columns undoes it.
On mobile, columns stack vertically. Use Wrap Columns to keep a group side by side instead. The Style button sets the Breakpoint Width at which the mobile layout applies, along with the container width and the canvas, background and text colors.
Selection menu
Select text to open the selection menu. From it you:
- Add or edit a Link.
- Toggle Bold, Italic, underline, and strikethrough.
- Wrap the selected sections in an Adaptyle Section with the Adaptyle button (it reads Remove Adaptyle once one is applied).
- Wrap or Unwrap Sections, Wrap or Unwrap Columns.
Text size and color, font family, weight, line height, letter spacing, and alignment are in the right-hand panel. Text converts to a heading or list from the same panel or the slash menu.
Adaptyle sections
An Adaptyle section is an Adaptyle prompt attached to the sections it wraps. The AI rewrites only those sections, using the recipient's own data. It leaves the rest of the email alone. To drop the prompt and keep the content as written, select text inside it and choose Remove Adaptyle.
Write the prompt in plain language, and attach reference text when the AI needs more to go on. The Subject and Preview fields take Adaptyle prompts directly.
Nothing is personalized as you type. It happens when you open the preview panel and click Generate preview, which spends credits and runs against your sample data. See previewing before you send.
Use the maxinja input below the editor tabs to refine the selected subject, section or block. The scope label and selection trail identify the target. “Shorten this section, keeping the offer and button unchanged” edits the saved draft. Add Adaptyle only when that passage should be generated again for each recipient.
Keyboard shortcuts
| Mac | Windows | Action |
|---|---|---|
/ | / | Open the slash menu |
⌘ B | Ctrl B | Bold |
⌘ I | Ctrl I | Italic |
⌘ U | Ctrl U | Underline |
⌘ L | Ctrl L | Insert Liquid variable |
⌘ Shift L | Ctrl Shift L | Insert Liquid tag |
⌘ Alt 0 | Ctrl Alt 0 | Convert to paragraph |
⌘ Alt 1-6 | Ctrl Alt 1-6 | Convert to heading (1 to 6) |
Reordering
Hover a block, section, or column to reveal a drag handle on the left. Drag it to reorder.
Switching out of the Dynamic Composer is one-way. Switch editor offers Code Editor, which writes your layout out as MJML source, and Simple HTML, which flattens it into the Plain composer block list. Neither can be undone.
Simple HTML also drops content: the Plain Composer has no preview text and no links on images, so your preview text and every link you set on an image are discarded in the move. The confirmation dialog says so before you commit.
Related
- Email editor: modes, branding, recipient, preview, and API.
- Adaptyle: how AI personalization works.
- Liquid: variables and tags.
- Attributes: fields you can reference.