# Add React modules in dnd\_area in templates

**URL:** <https://community.hubspot.com/t/add-react-modules-in-dnd-area-in-templates/133609>\
**Category:** CMS Development\
**Tags:** javascript\
**Created:** [May 30, 2025, 6:51am UTC](https://community.hubspot.com/t/add-react-modules-in-dnd-area-in-templates/133609 "2025-05-30T06:51:26Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![RWallentin](https://avatars.discourse-cdn.com/v4/letter/r/d6d6ee/32.png) [@RWallentin](https://community.hubspot.com/u/RWallentin)\
**Post date:** [May 30, 2025, 6:51am UTC](https://community.hubspot.com/t/add-react-modules-in-dnd-area-in-templates/133609/1 "2025-05-30T06:51:26Z")

</div>

Hi! I’m trying to add a basic group of react modules in my template, so that the editor gets a preview but can still add/remove modules.

Adding react modules as static modules seems to be working fine like so:

```lia-code-sample
{% block body %}
 {% module "hero"
 path="../components/modules/Hero",
 theme="{{ theme }}",
 heading="My heading",
 description="<p>Some description</p>" %}
 {% dnd_area "dnd_area"
 class="main" %}
 {% end_dnd_area %}
{% endblock body %}

```

but not if I add them inside the {% dnd\_area %} scope.

Using {% dnd\_module %} seems to have no effect either. Any tips?

Thanks!

---

<div class="post-metadata">

**Author:** ![BarryGrennan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/barrygrennan/32/97794_2.png) [@BarryGrennan](https://community.hubspot.com/u/BarryGrennan)\
**Post date:** [May 30, 2025, 1:04pm UTC](https://community.hubspot.com/t/add-react-modules-in-dnd-area-in-templates/133609/2 "2025-05-30T13:04:05Z")

</div>

That is curious.  
I can’t replicate it. Can you share your code within the dnd\_area?  
I’m still in the process of figuring out React modules too, so forgive me if this is a silly question, but how is it that your path doesn’t start with @projects? Is the template within the project or something?

* * *

 ![profile2022a.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/2X/7/7273a34ccfe3489fceebc8a36eca751481b59531.jpeg)

**Barry Grennan**

[Freelance HubSpot CMS Developer](https://www.seoanseo.ca?utm_source=HubSpotCommunity)

[Website](https://www.seoanseo.ca?utm_source=HubSpotCommunity) | [Contact](https://www.seoanseo.ca/#contact?utm_source=HubSpotCommunity) | [LinkedIn](https://www.linkedin.com/in/barrygrennan)

---

<div class="post-metadata">

**Author:** ![RWallentin](https://avatars.discourse-cdn.com/v4/letter/r/d6d6ee/32.png) [@RWallentin](https://community.hubspot.com/u/RWallentin)\
**Post date:** [June 2, 2025, 6:09am UTC](https://community.hubspot.com/t/add-react-modules-in-dnd-area-in-templates/133609/3 "2025-06-02T06:09:09Z")

</div>

The first thing I tried was the following:

```lia-code-sample
{% block body %}

 {% dnd_area "dnd_area"
 class="main" %}

 {% module "hero"
 path="../components/modules/Hero",
 theme="{{ theme }}",
 heading="some bs",
 description="<p>This is the description <b>field</b></p>" %}

 {% end_dnd_area %}

{% endblock body %}

```

Just putting the module inside the dnd area. Regarding the path I’m not sure what you mean.. The react module is in the project, so I’m simply importing it by its relative path to the template.

```lia-code-sample
theme/
 components/
 | modules/
 | | Hero/
 | | | index.tsx
 templates/
 | layouts/
 | | base.hubl.html
 | page.hubl.html

```

I’m using the module in the _page.hubl.html_ file.

And the module itself is just a react component. Like I said it renders just fine if I put it outside of the dnd\_area scope, but not within it.

---

<div class="post-metadata">

**Author:** ![BarryGrennan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/barrygrennan/32/97794_2.png) [@BarryGrennan](https://community.hubspot.com/u/BarryGrennan)\
**Post date:** [June 3, 2025, 7:11pm UTC](https://community.hubspot.com/t/add-react-modules-in-dnd-area-in-templates/133609/4 "2025-06-03T19:11:12Z")

</div>

> * * *
> 
> @RWallentin wrote:

```lia-code-sample
{% block body %}

 {% dnd_area "dnd_area"
 class="main" %}

 {% module "hero"
 path="../components/modules/Hero",
 theme="{{ theme }}",
 heading="some bs",
 description="<p>This is the description <b>field</b></p>" %}

 {% end_dnd_area %}

{% endblock body %}

```

* * *

Ok, so first thing I notice is that you used {% module %} there. That wouldn’t work in a dnd\_area. But you mention that you tried {% dnd\_module %} also. Did you have a closing {% end\_dnd\_module %} tag there?  
Also, a dnd\_module can’t be a direct descendant of a dnd\_area, only a dnd\_section can.  
So you’d do something like

```lia-code-sample
{% block body %}

 {% dnd_area "dnd_area" class="main" %}
{% dnd_section %}
 {% dnd_module "hero" path="../components/modules/Hero" %}
 {% end_dnd_module %}
{% end_dnd_section %}
 {% end_dnd_area %}

{% endblock body %}

```

If you try to put a dnd\_module directly in a dnd\_area like that, it just won’t show up.

* * *

 ![profile2022a.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/2X/7/7273a34ccfe3489fceebc8a36eca751481b59531.jpeg)

**Barry Grennan**

[Freelance HubSpot CMS Developer](https://www.seoanseo.ca?utm_source=HubSpotCommunity)

[Website](https://www.seoanseo.ca?utm_source=HubSpotCommunity) | [Contact](https://www.seoanseo.ca/#contact?utm_source=HubSpotCommunity) | [LinkedIn](https://www.linkedin.com/in/barrygrennan)

---

<div class="post-metadata">

**Author:** ![RWallentin](https://avatars.discourse-cdn.com/v4/letter/r/d6d6ee/32.png) [@RWallentin](https://community.hubspot.com/u/RWallentin)\
**Post date:** [June 4, 2025, 2:12am UTC](https://community.hubspot.com/t/add-react-modules-in-dnd-area-in-templates/133609/5 "2025-06-04T02:12:31Z")

</div>

I must have missed the part about ending tags. This works fine, thanks for the help!