Code mode

Edit the MJML source directly. Switch back to Visual any time — your changes stay in sync.

Code mode lets you edit the MJML source behind your email. Use it when you want fine control, want to paste markup from another template, or just prefer typing tags.

Switching modes

Use the Visual / Code / Chat switcher at the top of the editor. Switching is lossless: edits you made in Visual mode appear immediately as MJML in Code mode, and vice versa.

When you switch into Code mode, the editor automatically formats the source so it's readable — consistent indentation, attributes aligned, single-element-per-line. This happens silently; you don't need to run a command.

What lives in the source

The source is plain MJML — the open-source markup language for responsive email. A minimal email looks like:

<mjml>
  <mj-head>
    <mj-title>Your subject</mj-title>
  </mj-head>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text>Hello, world.</mj-text>
        <mj-button href="https://example.com">Click me</mj-button>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

EmailBuilder also recognises two custom tags:

<mj-module module-id="…"> — a connected module reference. Resolved into the referenced module's MJML at render time.
<mj-section data-eb-ai="true"> — an AI-editable section. The section's text content becomes a prompt the AI fulfils on each send.

Everything else is stock MJML. The full reference is at documentation.mjml.io.

Live preview

A small preview pane stays visible alongside the code, so you can see the result of your edits without switching modes. The preview re-renders as you type. If you type a malformed tag mid-edit, the preview silently keeps the last good render — there's no error spam in your way.

Errors and warnings

If MJML reports a parse error after you stop typing, you'll see a banner with the line number and a short hint. Common cases:

Unclosed tag — usually one line above where the error appears.
Attribute on the wrong element (e.g. padding on <mjml>).
Unknown tag — a typo or an MJML element that needs a community component.

Warnings (e.g. "attribute X is not standard") don't block save. They show in the same banner with a different colour.

Working with raw HTML

MJML doesn't accept arbitrary HTML inside <mj-text> except for a documented subset (<a>, <strong>, <em>, lists, basic inline styles). If you need a layout MJML can't express, use <mj-raw> — its contents pass through untouched, but be aware it won't auto-respond to mobile.

When to switch back to Visual

After a substantive code edit, switching back to Visual mode is a good sanity check. The drag handles, format toolbars, and inline editing all work normally on whatever you typed.