---
url: "/emailify/design/import.md"
description: "Use Emailify's experimental Import tab to turn existing HTML or MJML into editable email layers in Figma."
---

# Importing HTML and MJML emails

> Use Emailify's experimental Import tab to turn existing HTML or MJML into editable email layers in Figma.

The **Import** tab in **New Email** lets you start with existing email code instead of building every Row and Column from scratch. Paste HTML or MJML, or choose a file, then review the source before creating an editable Emailify frame.

> **Note:** Import is experimental and currently available in locally enabled development builds. It is hidden in the standard plugin build. The steps below apply when your **New Email** modal includes **Import**.

## Supported sources

- **HTML:** paste email HTML or choose an `.html` or `.htm` file.
- **MJML XML:** paste a complete `` document or choose an `.mjml` or `.xml` file.
- **MJML JSON:** paste a standard MJML component tree or choose a `.json` file.
- **Copied email packages:** paste a package from the experimental **Copy to Emailify** extension.

Keep the input under **2 MB**. MJML must also compile to HTML within that limit. `.eml` messages, ZIP files and arbitrary JSON are not supported. For an `.eml` message, extract its HTML body and make its image assets accessible before importing.

Use accessible image URLs. Images that require a login, local files and attachment references such as `cid:` may need to be replaced with hosted assets.

> **Tip:** Looking for an email to try? Visit [Really Good Emails](https://reallygoodemails.com/), open an email, and select **Code** to view its HTML source. Copy the HTML, paste it into Emailify's **Email code** field in the **Import** tab, then click **Preview Import** to review it before creating the email.

## Import an email

1. Open Emailify in Figma.
2. Click the **+** icon in the plugin header to open **New Email**.
3. Select **Import**, at the end of the tab row.
4. Paste your email code into **Email code**, then click **Preview Import**. Alternatively, click **Choose file** to load and analyze a supported file.
5. Review **Preview** and any **Notes**. Check that the source contains the text, images and backgrounds you expect.
6. Enter an **Email name**, then click **Create Email**.
7. Inspect the created Emailify frame and its editable layers.
8. Use [Emailify's HTML preview](/emailify/design/preview) to check the generated desktop and mobile output before exporting.

> **Warning:** The Import panel previews the source email. It does not show the final HTML exported from the reconstructed Emailify layers. Always check the created frame and Emailify's generated preview separately.

Editing the source clears the previous import preparation. Click **Preview Import** again before creating the updated email.

## Import MJML

Provide one complete MJML document with one `mj-body`. For example:

```xml

        Hello from Emailify

```

The equivalent JSON uses `tagName`, `attributes`, `children` and `content`:

```json
{
  "tagName": "mjml",
  "children": [{
    "tagName": "mj-body",
    "attributes": { "width": "600px" },
    "children": [{
      "tagName": "mj-section",
      "children": [{
        "tagName": "mj-column",
        "children": [{ "tagName": "mj-text", "content": "Hello from Emailify" }]
      }]
    }]
  }]
}
```

Emailify validates MJML using **MJML4**, renders it to HTML, then reconstructs editable layers from that HTML. This is not a direct restoration of the original MJML component tree. Review custom CSS, fonts, spacing and responsive behavior after import.

- Inline `mj-include` content before importing; included files are not loaded.
- Replace `mj-raw` with editable MJML components, or import its rendered HTML for review.
- Use a static version of MJML accordions and carousels; interactive components are not supported as editable imports.
- Remove XML DOCTYPE and entity declarations. Fix invalid component structure or attributes before retrying.

## Check the result

Compare the created email with the source on desktop and at a narrow mobile width, such as **375px**. Check all text, images, background images, buttons and link destinations, then inspect column stacking, wrapping and padding.

Import attempts to map the source into Emailify's supported layout structure. Complex nesting, custom CSS and unavailable assets can require manual adjustments. Successful source preparation does not certify an exact visual match or delivery behavior in every email client.

If preparation fails, open **Notes** for the reported issue. Correct the source or replace inaccessible assets, then preview again. If the created layout needs adjustment, use [Rows](/emailify/design/rows), [Columns](/emailify/design/columns) and [responsive settings](/emailify/design/responsive), then follow the [email testing guide](/emailify/export/testing).