Skip to main content
The Code tab shows what your email looks like as code. Use it to check the markup the builder produces, copy it into another tool, or take over the template as hand-written HTML or MJML.

​
Open the code view

Click Code (the </> tab) in the builder toolbar. There are three panes: Each pane has Copy and Download buttons. The HTML and MJML panes update when you change the canvas. If the MJML conversion has something to report, you’ll see an MJML warnings count above the code.
The HTML and MJML panes are rendered on the server. If you switch between them or edit very quickly you may see “Too many previews in a moment — this will retry shortly.” The pane waits a few seconds and tries again by itself, up to three times. If it still can’t render, it tells you to wait a minute; then switch panes or make an edit to try again.

​
Edit the JSON document

The JSON pane is the one place where you can change settings the Inspect panel has no field for.
1

Edit the JSON

Click Code, then JSON, and edit the document.
2

Apply it

Click Apply to canvas. The change becomes one undo step, like any other edit. Click Discard to throw your edits away.
The document must still contain its root block. If it doesn’t, you’ll see The document needs a “root” block and nothing is applied.

​
Switch a template to hand-written code

If you’d rather write the email yourself, you can hand the template over to its HTML or MJML.
1

Open the HTML or MJML pane

Click Code, then HTML or MJML, depending on which language you want to write in.
2

Click Edit as HTML (or Edit as MJML)

Read the confirmation carefully, then click Switch to code.
3

Write your code

The builder is replaced by a code editor with a live preview on the right. Changes render on the right as you type.
After you switch, the visual builder no longer edits this template. Your blocks are kept but not sent: only the code is used. If you need the blocks back, open Version History and restore a version saved before the switch.

​
What changes in code mode

  • The block palette, canvas, Styles, Inspect and Layers panels are replaced by the source editor and preview.
  • Undo/redo and the AMP toggle are hidden. AMP is generated from blocks, so a hand-written template can’t have an AMP version.
  • Save, autosave, Preview as…, Send Test Email, Export and Version History keep working.
  • Merge tags and Liquid work the same way as in block templates. See Personalization.

​
Messages in the source editor

If you try to save while there are errors, you’ll see Fix the errors in your code before it can be saved.

​
Other ways to use your own HTML

  • HTML block. To add a piece of custom markup to an otherwise visual email, add an HTML block from Advanced blocks and paste your code into it.
  • Import. To start a new template from an HTML file, use Import on the Templates page. See Template library.

​
Export the code

The builder’s Export menu downloads the email as Export HTML, Export as ZIP (HTML, a plain-text version and a metadata file) or Export MJML. Export as ZIP uses the last saved version of the template. For a hand-written template:
  • Export HTML and Export as ZIP contain the compiled HTML of the code you wrote, not the blocks the template had before the switch. The ZIP of an MJML template also includes your source as template.mjml.
  • Export MJML downloads your MJML source as you wrote it. A template written in HTML has no MJML, so Export MJML is disabled for it.
Exporting a hand-written template follows the same rules as any other: in a team workspace it must be approved first (see Approvals in team workspaces), and Export HTML counts towards your plan’s monthly HTML export allowance.

​
Troubleshooting

The HTML and MJML panes are read-only views of your blocks. To change the markup permanently, use Edit as HTML, or put your markup in an HTML block.
Check that the JSON is valid and still has a root block. An error message appears above the editor when it can’t be applied.
Look for the Removed, because email clients block it: message. Scripts, forms, iframes and event handlers are always removed.