> ## Documentation Index
> Fetch the complete documentation index at: https://docs.instantcampaign.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Code view and custom HTML

> See the HTML, MJML and JSON behind a template, edit the block document directly, or switch a template to hand-written HTML or MJML.

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:

| Pane     | What it shows                                      | Editable?                           |
| -------- | -------------------------------------------------- | ----------------------------------- |
| **HTML** | The HTML that's actually sent                      | No. It's generated from your blocks |
| **MJML** | The same email as MJML                             | No. It's generated from your blocks |
| **JSON** | The builder document: every block and its settings | Yes                                 |

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.

<Note>
  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.
</Note>

## Edit the JSON document

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

<Steps>
  <Step title="Edit the JSON">
    Click **Code**, then **JSON**, and edit the document.
  </Step>

  <Step title="Apply it">
    Click **Apply to canvas**. The change becomes one undo step, like any other edit. Click **Discard** to throw your edits away.
  </Step>
</Steps>

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.

<Steps>
  <Step title="Open the HTML or MJML pane">
    Click **Code**, then **HTML** or **MJML**, depending on which language you want to write in.
  </Step>

  <Step title="Click Edit as HTML (or Edit as MJML)">
    Read the confirmation carefully, then click **Switch to code**.
  </Step>

  <Step title="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.**
  </Step>
</Steps>

<Warning>
  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.
</Warning>

### 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](/guides/email-and-templates/personalization).

### Messages in the source editor

| Message                                                       | What it means                                                                                                   |
| ------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
| **MJML reported:**                                            | The MJML doesn't compile. Nothing can be previewed or saved until you fix it.                                   |
| **There is no code to render yet.**                           | The editor is empty.                                                                                            |
| **No unsubscribe link — one is added automatically at send.** | Not an error. A compliance footer is added when the email is sent.                                              |
| **Removed, because email clients block it:**                  | Your code contained scripts, iframes, forms, embeds or `on…` event handlers. They are removed from what's sent. |

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](/guides/email-and-templates/template-library#import-a-design).

## 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](/guides/email-and-templates/email-builder#approvals-in-team-workspaces)), and **Export HTML** counts towards your plan's monthly HTML export allowance.

## Troubleshooting

<AccordionGroup>
  <Accordion title="I edited the HTML pane but my changes disappeared">
    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.
  </Accordion>

  <Accordion title="Apply to canvas did nothing">
    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.
  </Accordion>

  <Accordion title="Part of my pasted code vanished from the preview">
    Look for the **Removed, because email clients block it:** message. Scripts, forms, iframes and event handlers are always removed.
  </Accordion>
</AccordionGroup>