# Module code appears raw in the email

**URL:** <https://community.hubspot.com/t/le-code-du-module-apparait-en-brut-dans-lemail/156303>\
**Category:** Email Marketing Tool\
**Tags:** templates\
**Created:** [August 17, 2026, 2:39pm UTC](https://community.hubspot.com/t/le-code-du-module-apparait-en-brut-dans-lemail/156303 "2026-08-17T14:39:30Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![ThomC](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/thomc/32/25114_2.png) [@ThomC](https://community.hubspot.com/u/ThomC)\
**Post date:** [August 17, 2026, 2:39pm UTC](https://community.hubspot.com/t/le-code-du-module-apparait-en-brut-dans-lemail/156303/1 "2026-08-17T14:39:30Z")

</div>

I tried to code the following module:

 ![Capture d'écran 2026-08-17 163705](https://d2qpr2jzcazej7.cloudfront.net/original/3X/b/6/b69a73ab136478af994a44bb22a022c9a869c4ea.png)

It works very well when making changes in the Email Marketing interface for sending, but it throws this bug when adjusting email templates, and I don’t know how to fix it.

 ![Capture d'écran 2026-08-17 143902](https://d2qpr2jzcazej7.cloudfront.net/original/3X/0/6/0655f7af6a694479ce8c4c87feb6664e124f3f4f.png)

---

<div class="post-metadata">

**Author:** ![stassey](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/stassey/32/36_2.png) [@stassey](https://community.hubspot.com/u/stassey)\
**Post date:** [August 17, 2026, 4:16pm UTC](https://community.hubspot.com/t/le-code-du-module-apparait-en-brut-dans-lemail/156303/2 "2026-08-17T16:16:51Z")

</div>

Hey @ThomC,

Welcome back!! 👋

The first thing I’d check is if your code was pasted into a Rich Text field or added as template text instead of being rendered as a custom module. Here are a few resources I found for you that may be helpful while we wait for others in the community to chime in:

- [Create and edit modules in the Design Manager](https://knowledge.hubspot.com/design-manager/create-and-edit-modules)

- [Use modules in templates](https://developers.hubspot.com/docs/cms/reference/modules/using-modules-in-templates)

- [Build a custom coded template](https://knowledge.hubspot.com/design-manager/build-a-custom-coded-template)

Tagg in some folks from the community to see if they have any tips and tricks on this!

Hey @GRajput, @Alex_Boissonneault, @danielsinewe – do you have any suggestions for @ThomC on this?

Thank you!!

Sam, Community Manager

---

<div class="post-metadata">

**Author:** ![Alex\_Boissonneault](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/alex_boissonneault/32/225270_2.png) [@Alex\_Boissonneault](https://community.hubspot.com/u/Alex_Boissonneault)\
**Post date:** [August 17, 2026, 4:54pm UTC](https://community.hubspot.com/t/le-code-du-module-apparait-en-brut-dans-lemail/156303/5 "2026-08-17T16:54:38Z")

</div>

Thanks for looping me in, @stassey.

Hey @ThomC, good to see you here!  
Regarding the ask, this is the raw code dump is a classic symptom: when HubSpot shows your HubL as plain text instead of running it, it almost always means the template engine hit an error and “bailed out,” so it prints the source instead of the rendered output. The reason it behaves differently between the two editors is context, in the marketing email editor your module’s fields are fully populated with their defaults, but in the email _template_ editor those field/context values (like `layout_group`, `gutter_a`, `gutter_b`, `image_src`, `inner_width`, `final_image_width`) can come through empty, and the moment your arithmetic runs on an undefined value, e.g. `(10 + gutter_a)` or the `img_px` calculations, the whole module fails and falls back to raw.

A few things I’d try, in order:

1. Isolate it first. Temporarily replace the module body with something trivial like `{{ "test" }}` and drop it into the template. If that renders, the module wiring is fine (so it’s not a rich-text-vs-module issue) and the problem is inside the logic, which is what I’d bet on here.
2. Default every numeric variable. Any value you do math on should have a fallback, e.g. `{% set gutter_a = gutter_a|default(0) %}`, same for `gutter_b`, `inner_width`, `final_image_width`, `image_col_px`, etc. Null-safe defaults on the numbers are usually what fixes the “works in one editor, breaks in the other” behaviour.
3. Add logic back in chunks. Once the defaults are in, reintroduce your `{% set %}` blocks and the layout `{% if/elif/else %}` a piece at a time — the exact point it flips back to raw tells you which line the engine is choking on. With this many nested conditionals, a single mismatched `{% if %}` / `{% endif %}` will also trigger the same raw output.

These docs are handy for the module/template context side of it:

- Use modules in templates: [Using modules in templates - HubSpot docs](https://developers.hubspot.com/docs/cms/reference/modules/using-modules-in-templates)
- Create and edit modules in the Design Manager: [Create and edit modules in the design manager](https://knowledge.hubspot.com/design-manager/create-and-edit-modules)

If you can share the full module code (or the `fields.json`), I’m happy to point to the exact line that’s breaking. My money’s on an unguarded numeric variable. 🙂

---

<div class="post-metadata">

**Author:** ![ThomC](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/thomc/32/25114_2.png) [@ThomC](https://community.hubspot.com/u/ThomC)\
**Post date:** [August 18, 2026, 7:56am UTC](https://community.hubspot.com/t/le-code-du-module-apparait-en-brut-dans-lemail/156303/6 "2026-08-18T07:56:36Z")

</div>

Hello @Alex_Boissonneault  
Thank you very much for your feedback and for your help in advance.

Here is the JSON in question for this module, hopefully it answers your question 🙂

{  
“children”:   
{  
“display\_width”: null,  
“id”: “f9973df8-97b1-f26a-9892-8dc40d337328”,  
“label”: “Title”,  
“locked”: false,  
“name”: “title”,  
“required”: false,  
“type”: “richtext”  
},  
{  
“display\_width”: null,  
“id”: “785b2db9-5356-239b-0b75-69e4178ef0d4”,  
“label”: “Content”,  
“locked”: false,  
“name”: “body\_text”,  
“required”: false,  
“type”: “richtext”  
},  
{  
“default”: false,  
“display”: “checkbox”,  
“display\_width”: null,  
“id”: “5fa37d14-3a07-da1e-f8dd-4746b19cf397”,  
“label”: “Show separator”,  
“locked”: false,  
“name”: “show\_separator”,  
“required”: false,  
“type”: “boolean”  
},  
{  
“allow\_new\_line”: false,  
“default”: “”,  
“display\_width”: null,  
“id”: “6b8518dd-fc4d-1e08-abf3-3b184803217c”,  
“label”: “Training duration”,  
“locked”: false,  
“name”: “duration”,  
“required”: false,  
“type”: “text”  
},  
{  
“children”:   
{  
“default”: false,  
“display”: “checkbox”,  
“display\_width”: null,  
“id”: “64b1ae4f-6691-fc2f-9395-155cccce62bf”,  
“label”: “Show rating”,  
“locked”: false,  
“name”: “show\_rating”,  
“required”: false,  
“type”: “boolean”  
},  
{  
“default”: 5,  
“display”: “text”,  
“display\_width”: null,  
“id”: “cae0461b-3220-1a9b-9ded-ae052c4593ab”,  
“label”: “Star rating”,  
“locked”: false,  
“max”: 5,  
“min”: 0,  
“name”: “rating”,  
“required”: false,  
“step”: 0.1,  
“suffix”: “/5”,  
“type”: “number”  
},  
{  
“default”: false,  
“display”: “checkbox”,  
“display\_width”: null,  
“id”: “327798eb-8588-1045-3f60-5ee5e3a0e70e”,  
“label”: “Show second separator”,  
“locked”: false,  
“name”: “show\_separator\_2”,  
“required”: false,  
“type”: “boolean”  
}  
  
,  
“default”: {  
“show\_rating”: false,  
“rating”: 5,  
“show\_separator\_2”: false  
},  
“display\_width”: null,  
“expanded”: false,  
“group\_occurrence\_meta”: null,  
“id”: “f6a2fc1b-db9b-6612-aec4-5f566c79487f”,  
“label”: “rating settings”,  
“locked”: false,  
“name”: “rating\_settings”,  
“required”: false,  
“tab”: “CONTENT”,  
“type”: “group”  
}  
  
,  
“default”: {  
“show\_separator”: false,  
“duration”: “”,  
“rating\_settings”: {  
“show\_rating”: false,  
“rating”: 5,  
“show\_separator\_2”: false  
}  
},  
“display\_width”: null,  
“expanded”: false,  
“group\_occurrence\_meta”: null,  
“id”: “dc0f3b82-14bf-52ac-0ad1-0f9bd02860fc”,  
“label”: “Content management”,  
“locked”: false,  
“name”: “content”,  
“required”: false,  
“tab”: “CONTENT”,  
“type”: “group”  
},  
{  
“children”:   
{  
“default”: {  
“src”: “”,  
“alt”: null,  
“loading”: “lazy”  
},  
“display\_width”: null,  
“id”: “fe8788ee-a211-3bd7-ae9f-35664f8bdd41”,  
“label”: “Image”,  
“locked”: false,  
“name”: “image”,  
“required”: false,  
“resizable”: false,  
“responsive”: true,  
“show\_loading”: false,  
“type”: “image”  
},  
{  
“display”: “slider”,  
“display\_width”: null,  
“id”: “49833378-f559-42af-bec5-3fda23c66c07”,  
“label”: “Image size (%)”,  
“locked”: false,  
“max”: 100,  
“min”: 1,  
“name”: “image\_width”,  
“required”: false,  
“step”: 1,  
“type”: “number”  
},  
{  
“default”: 12,  
“display”: “slider”,  
“display\_width”: null,  
“id”: “a447de7a-f854-712e-1d71-46b274e9c111”,  
“label”: “Image corner radius (px)”,  
“locked”: false,  
“name”: “image\_border\_radius”,  
“required”: false,  
“step”: 1,  
“type”: “number”  
},  
{  
“choices”:   
  
“left”,  
“Left”  
  
,  
  
“center”,  
“Center”  
  
,  
  
“right”,  
“Right”  
  
  
,  
“default”: “center”,  
“display”: “select”,  
“display\_width”: null,  
“id”: “8486294c-8118-f661-b603-bda37703a803”,  
“label”: “Image placement”,  
“locked”: false,  
“multiple”: false,  
“name”: “image\_align”,  
“preset”: null,  
“reordering\_enabled”: true,  
“required”: false,  
“type”: “choice”  
}  
  
,  
“default”: {  
“image”: {  
“src”: “”,  
“alt”: null,  
“loading”: “lazy”  
},  
“image\_border\_radius”: 12,  
“image\_align”: “center”  
},  
“display\_width”: null,  
“expanded”: false,  
“group\_occurrence\_meta”: null,  
“id”: “17732df3-bc52-571f-8935-2e020dc2a357”,  
“label”: “Icon / image management”,  
“locked”: false,  
“name”: “media”,  
“required”: false,  
“tab”: “CONTENT”,  
“type”: “group”  
},  
{  
“children”:   
{  
“choices”:   
  
“1-2”,  
“1/2”  
  
,  
  
“1-3\_2-3”,  
“1/3 - 2/3”  
  
,  
  
“2-3\_1-3”,  
“2/3 - 1/3”  
  
,  
  
“1-4\_3-4”,  
“1/4 - 3/4”  
  
,  
  
“3-4\_1-4”,  
“3/4 - 1/4”  
  
,  
  
“1-5\_4-5”,  
“1-5 / 4-5”  
  
,  
  
“4-5\_1-5”,  
“4-5 / 1-5”  
  
,  
  
“1-6\_5-6”,  
“1-6 / 5-6”  
  
,  
  
“5-6\_1-6”,  
“5-6 / 1-6”  
  
  
,  
“default”: “1-2”,  
“display”: “select”,  
“display\_width”: null,  
“id”: “da603637-94a8-ab66-55c3-6a2b0829a5ad”,  
“label”: “Column choice”,  
“locked”: false,  
“multiple”: false,  
“name”: “column\_ratio”,  
“preset”: null,  
“reordering\_enabled”: true,  
“required”: false,  
“type”: “choice”  
},  
{  
“choices”:   
  
“image\_left”,  
“Image on the left”  
  
,  
  
“image\_right”,  
“Image on the right”  
  
  
,  
“default”: “image\_left”,  
“display”: “select”,  
“display\_width”: null,  
“id”: “713564f5-8527-45e6-79ee-6ef76b85018c”,  
“label”: “Column inversion”,  
“locked”: false,  
“multiple”: false,  
“name”: “column\_order”,  
“preset”: null,  
“reordering\_enabled”: true,  
“required”: false,  
“type”: “choice”  
},  
{  
“default”: 0,  
“display”: “slider”,  
“display\_width”: null,  
“id”: “ca9ddb2f-25e3-b30c-1e1e-bbff93959e60”,  
“label”: “Spacing between columns (px)”,  
“locked”: false,  
“name”: “gutter\_width”,  
“required”: false,  
“step”: 1,  
“type”: “number”  
},  
{  
“choices”:   
  
“side\_by\_side”,  
“Side by side on desktop & mobile”  
  
,  
  
“stack”,  
“Stacked only on mobile”  
  
,  
  
“stack\_always”,  
“Stacked on desktop & mobile”  
  
  
,  
“default”: “side\_by\_side”,  
“display”: “radio”,  
“display\_width”: null,  
“id”: “76c109a1-9c37-343d-081d-d4db7847ab1b”,  
“label”: “Column layout”,  
“locked”: false,  
“multiple”: false,  
“name”: “mobile\_layout”,  
“preset”: null,  
“reordering\_enabled”: true,  
“required”: false,  
“type”: “choice”  
}  
  
,  
“default”: {  
“column\_ratio”: “1-2”,  
“column\_order”: “image\_left”,  
“gutter\_width”: 0,  
“mobile\_layout”: “side\_by\_side”  
},  
“display\_width”: null,  
“expanded”: false,  
“group\_occurrence\_meta”: null,  
“id”: “770f75cb-c501-1a87-f0db-e4dd46c87878”,  
“label”: “Column and spacing management”,  
“locked”: false,  
“name”: “layout”,  
“required”: false,  
“tab”: “CONTENT”,  
“type”: “group”  
},  
{  
“children”:   
{  
“allow\_new\_line”: false,  
“default”: “Sign up for the training”,  
“display\_width”: null,  
“id”: “88957bd8-0ff0-98dc-3d01-9f693060a02a”,  
“label”: “Button text”,  
“locked”: false,  
“name”: “cta\_label”,  
“required”: false,  
“type”: “text”  
},  
{  
“default”: {  
“url”: {  
“content\_id”: null,  
“type”: “EXTERNAL”,  
“href”: “”  
},  
“open\_in\_new\_tab”: false,  
“no\_follow”: false  
},  
“display\_width”: null,  
“id”: “5628c198-015b-3e19-98ca-74a2019df2b8”,  
“label”: “Button link”,  
“locked”: false,  
“name”: “link”,  
“required”: false,  
“show\_advanced\_rel\_options”: false,  
“supported\_types”:   
“EXTERNAL”  
  
,  
“type”: “link”  
},  
{  
“default”: {  
“color”: null,  
“opacity”: 100  
},  
“display\_width”: null,  
“id”: “6ec9822c-fcb5-0f24-69e9-8a27f1a4b0dc”,  
“label”: “CTA color”,  
“locked”: false,  
“name”: “cta\_bg\_color”,  
“required”: false,  
“show\_opacity”: false,  
“type”: “color”  
}  
  
,  
“default”: {  
“cta\_label”: “Sign up for the training”,  
“link”: {  
“url”: {  
“content\_id”: null,  
“type”: “EXTERNAL”,  
“href”: “”  
},  
“open\_in\_new\_tab”: false,  
“no\_follow”: false  
},  
“cta\_bg\_color”: {  
“color”: null,  
“opacity”: 100  
}  
},  
“display\_width”: null,  
“expanded”: false,  
“group\_occurrence\_meta”: null,  
“id”: “fe1fb3c3-73fa-9744-dcb2-4fac77bc1700”,  
“label”: “CTA management”,  
“locked”: false,  
“name”: “cta”,  
“required”: false,  
“tab”: “CONTENT”,  
“type”: “group”  
},  
{  
“children”:   
{  
“default”: {  
“color”: null,  
“opacity”: 100  
},  
“display\_width”: null,  
“id”: “9bebb2f1-dabe-d0ea-3937-7c72a0ce1bf1”,  
“label”: “Card color”,  
“locked”: false,  
“name”: “card\_bg\_color”,  
“required”: false,  
“show\_opacity”: false,  
“type”: “color”  
},  
{  
“default”: true,  
“display”: “checkbox”,  
“display\_width”: null,  
“id”: “b0f31c0c-9d5f-aa3a-8fb6-6a5805d11394”,  
“label”: “Show separator (after the title)”,  
“locked”: true,  
“name”: “show\_separator”,  
“required”: false,  
“type”: “boolean”  
},  
{  
“default”: true,  
“display”: “checkbox”,  
“display\_width”: null,  
“id”: “2afc4a93-fe49-c1d0-d4f5-e26a0009f7b7”,  
“label”: “Show separator (after the rating)”,  
“locked”: true,  
“name”: “show\_separator\_2”,  
“required”: false,  
“type”: “boolean”  
},  
{  
“children”:   
{  
“default”: false,  
“display”: “checkbox”,  
“display\_width”: null,  
“id”: “9470f27d-a600-75c7-5761-d33ffa9561fe”,  
“label”: “Show a border”,  
“locked”: false,  
“name”: “enabled”,  
“required”: false,  
“type”: “boolean”  
},  
{  
“default”: {  
“color”: null,  
“opacity”: null  
},  
“display\_width”: null,  
“id”: “4af1ea42-34e0-810f-528d-430ea1cf679f”,  
“label”: “Border color”,  
“locked”: false,  
“name”: “color”,  
“required”: false,  
“type”: “color”  
},  
{  
“display”: “slider”,  
“display\_width”: null,  
“id”: “17f2e127-9445-a760-41b7-66b496fc0425”,  
“label”: “Border size”,  
“locked”: false,  
“name”: “border\_width”,  
“required”: false,  
“step”: 1,  
“type”: “number”  
},  
{  
“display”: “slider”,  
“display\_width”: null,  
“id”: “2c586ee4-d82e-d225-c0a6-430ac499a154”,  
“label”: “Border radius”,  
“locked”: false,  
“name”: “radius”,  
“required”: false,  
“step”: 1,  
“type”: “number”  
}  
  
,  
“default”: {  
“enabled”: false,  
“color”: {  
“color”: null,  
“opacity”: null  
}  
},  
“display\_width”: null,  
“expanded”: false,  
“group\_occurrence\_meta”: null,  
“id”: “deda8b64-db7f-b888-a8c0-2e92ea8cc0c4”,  
“label”: “Border”,  
“locked”: false,  
“name”: “border”,  
“required”: false,  
“tab”: “CONTENT”,  
“type”: “group”  
},  
{  
“children”:   
{  
“default”: false,  
“display”: “checkbox”,  
“display\_width”: null,  
“id”: “389bca56-6ed7-21fe-e088-aa079e85c28c”,  
“label”: “Show a shadow”,  
“locked”: false,  
“name”: “enabled”,  
“required”: false,  
“type”: “boolean”  
},  
{  
“default”: {  
“color”: null,  
“opacity”: null  
},  
“display\_width”: null,  
“id”: “ab68e383-cd86-1a81-d409-63476fdf6440”,  
“label”: “Shadow color”,  
“locked”: false,  
“name”: “color”,  
“required”: false,  
“type”: “color”  
},  
{  
“display”: “slider”,  
“display\_width”: null,  
“id”: “9856f97d-0a04-fe36-273e-8dc7b23f88f9”,  
“label”: “Shadow blur size”,  
“locked”: false,  
“name”: “blur”,  
“required”: false,  
“step”: 1,  
“type”: “number”  
}  
  
,  
“default”: {  
“enabled”: false,  
“color”: {  
“color”: null,  
“opacity”: null  
}  
},  
“display\_width”: null,  
“expanded”: false,  
“group\_occurrence\_meta”: null,  
“id”: “bec3c234-2952-ef99-5d15-472c606525bf”,  
“label”: “Shadow”,  
“locked”: false,  
“name”: “shadow”,  
“required”: false,  
“tab”: “CONTENT”,  
“type”: “group”  
}  
  
,  
“default”: {  
“card\_bg\_color”: {  
“color”: null,  
“opacity”: 100  
},  
“show\_separator”: true,  
“show\_separator\_2”: true,  
“border”: {  
“enabled”: false,  
“color”: {  
“color”: null,  
“opacity”: null  
}  
},  
“shadow”: {  
“enabled”: false,  
“color”: {  
“color”: null,  
“opacity”: null  
}  
}  
},  
“display\_width”: null,  
“expanded”: false,  
“group\_occurrence\_meta”: null,  
“id”: “f9decee0-a896-67df-e0bb-2799da6fdaeb”,  
“label”: “Card style”,  
“locked”: false,  
“name”: “style”,  
“required”: false,  
“tab”: “CONTENT”,  
“type”: “group”  
}  
  
}

---

<div class="post-metadata">

**Author:** ![Alex\_Boissonneault](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/alex_boissonneault/32/225270_2.png) [@Alex\_Boissonneault](https://community.hubspot.com/u/Alex_Boissonneault)\
**Post date:** [August 18, 2026, 7:46pm UTC](https://community.hubspot.com/t/le-code-du-module-apparait-en-brut-dans-lemail/156303/7 "2026-08-18T19:46:03Z")

</div>

Thanks for sending this over, @ThomC this is really helpful…

Looking at your `fields.json`, I think it points right at the cause. A few of your **number** fields have no `default` value set, the most important one being **`image_width`** (the “Image size (%)” slider), but also `border_width`, `radius` (border) and `blur` (shadow). They only have `min` / `max` / `step`, no default:

JSON

```auto
{
  "label": "Image size (%)",
  "name": "image_width",
  "min": 1, "max": 100, "step": 1,
  "type": "number"
  // 👈 no "default"
}

```

Here’s why that matters: in the marketing email editor, you’ve physically set those sliders, so the values exist and your math runs fine. But in the template editor the module renders with its _defaults_ and where there’s no default, the value comes through as `null`. The moment your HubL does arithmetic on it (your `final_image_width` / `img_px` calculations feed off `image_width`), the expression throws, HubSpot gives up on rendering, and it dumps the raw code instead. That’s exactly the “works in one editor, raw in the other” behaviour.

Two fixes, and I’d do both:

1. **Add defaults in `fields.json`** for every number field, e.g. `"default": 100` on `image_width`, and sensible values on `border_width`, `radius`, `blur`.
2. **Null-guard the math in `module.html`** so it can never break even if a value is empty:

hubl

```auto
{% set final_image_width = module.media.image_width|default(100) %}
{% set gutter_a = module.layout.gutter_width|default(0) %}
{% set gutter_b = module.layout.gutter_width|default(0) %}

```

One more thing worth checking: your calculations also use **`inner_width`**. That’s a context variable HubSpot injects when the module renders inside a real email, but it can be undefined in the template editor, so I’d give it a fallback too, e.g. `{% set inner_width = inner_width|default(600) %}` near the top.

Add the defaults + the `|default()` guards and I’d expect the raw-code issue to disappear in the template editor.

If it’s still misbehaving after that, paste your `module.html` and I’ll trace the exact expression, but I’m fairly confident it’s the missing `image_width` default.

---

<div class="post-metadata">

**Author:** ![ThomC](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/thomc/32/25114_2.png) [@ThomC](https://community.hubspot.com/u/ThomC)\
**Post date:** [August 20, 2026, 1:41pm UTC](https://community.hubspot.com/t/le-code-du-module-apparait-en-brut-dans-lemail/156303/9 "2026-08-20T13:41:09Z")

</div>

Hi @Alex_Boissonneault,

I haven’t gotten back to you since then, but I’m currently fixing the code and have been able to identify the issue, which turned out to be related to column management, causing the code to crash.

I’m working on what’s needed to get the module up and running.

Thank you again for your help so far, as well as to @TeeTech and @stassey 🙂