Using the Raw Code Component

The mj-raw frame (Raw Code Component) lets you inject custom HTML, CSS, or ESP-specific templating code directly into your email design. It's one of the most powerful features in the Email Love Figma Plugin — and the one that bridges the gap between visual design and the advanced functionality your ESP or marketing platform requires.

This guide covers when to use it, how to set it up, and the most common use cases.

When the plugin exports your email, every standard component (text, images, buttons, sections) gets converted to clean MJML code. The Raw Code Component is different — it passes your code through exactly as-is, without any conversion or modification. Whatever HTML, CSS, or templating syntax you put in, that's what appears in the final export.

This makes it essential for anything the plugin's visual components can't handle natively: conditional logic, tracking pixels, live content embeds, custom HTML blocks, and ESP-specific merge tags or snippets.

Step 1: Open the Email Love plugin and go to the Assets tab.

Step 2: Click "Code" in the left-side navigation (you'll find it near the bottom of the list, below Footer).

Step 3: Paste your custom HTML, conditional logic, or ESP tags directly into the code box that says "Add your custom code here."

Step 4: Click the "Add Custom Code" button. The plugin will insert the raw code component into your email at the selected position.

You can also find the Code component under the Build Your Own tab in the plugin.

Check out our example Figma file to see the Raw Code Component in action.

The most popular use case. Wrap sections of your email in ESP-specific conditional logic so different subscribers see different content.

Example (Liquid syntax — works with Braze, Iterable, Customer.io, and others):

Place this in one mj-raw frame above the content you want to conditionally show. Then place a closing tag in another mj-raw frame below that content:

You can chain multiple conditions by adding elsif blocks with additional mj-raw frames between content sections.

Add invisible tracking pixels from analytics tools, attribution platforms, or your ESP. Place the mj-raw frame at the bottom of your email (inside the last section) and paste the pixel code:

Embed real-time content from platforms like Movable Ink, Litmus Personalize (formerly Litmus Live), or Nifty Images. These services generate dynamic images or HTML that update at the moment the email is opened.

Paste the embed code from your live content provider into the mj-raw frame's code field. The code will be included in the export exactly as provided.

Many ESPs support reusable content blocks or snippets that are referenced by a tag in your HTML. For example:

Iterable:

Customer.io:

Braze:

Place the snippet tag in an mj-raw frame wherever you want the content block to appear.

For HTML that the plugin doesn't support natively — like custom tables, embedded forms (with caveats), interactive elements for supported clients, or specialized markup — the Raw Code Component lets you insert it directly.

Where you place the mj-raw frame matters:

Between wrappers: Your code wraps around entire wrapper blocks. Use this for conditional logic that shows or hides full sections of the email.

Between sections (inside a wrapper): Your code sits between rows of content. Use this for conditional breaks within a wrapper, or for inserting content between sections.

Inside a column: Your code appears inline with other content elements (text, images, buttons). Use this for tracking pixels, small HTML snippets, or inline conditional tags.

No visual preview. The Raw Code Component appears as a placeholder frame in Figma. You won't see a live preview of your custom code in the Figma canvas or in the plugin's preview panel. You'll need to export and test in your ESP or an email testing tool to see the rendered result.

No MJML conversion. Code in the mj-raw frame is not processed by MJML. This means it won't automatically become responsive or gain email client compatibility fixes. If you need responsive behavior, you'll need to handle that in your custom code.

The plugin can't validate custom code. Code inside mj-raw frames is not checked for syntax errors. Double-check your conditional tags, merge tags, and HTML syntax before exporting.

Keep it minimal. The Raw Code Component is powerful but should be used sparingly. If you find yourself putting large amounts of content in mj-raw frames, consider whether the plugin's standard components could handle it instead — they'll give you better responsive behavior and email client compatibility.

My conditional content isn't rendering:

Check that your opening and closing tags match and are at the same nesting level. Also verify that your ESP's templating syntax is correct — a missing % or unclosed bracket will break the logic.

My tracking pixel is visible in the email:

Make sure the image tag includes width="1" height="1" and style="display:none;". Some email clients ignore display:none, so the width/height attributes are your safety net.

My custom HTML looks broken:

Remember that mj-raw code doesn't go through MJML processing. If you need responsive tables or layouts, you'll need to include the full responsive CSS inline in your custom code. For complex custom HTML, test across multiple email clients.

The mj-raw frame isn't exporting my code:

Make sure you pasted the code into the Properties tab in the plugin, not into a Figma text layer inside the frame. The plugin reads from the Properties panel, not from visual content on the canvas.