# Dynamic HTML component

**URL:** <https://forum.wixstudio.com/t/dynamic-html-component/70054>\
**Category:** Ask the community\
**Tags:** wix-blocks, wix-stores, code\
**Created:** [April 1, 2025, 10:04am UTC](https://forum.wixstudio.com/t/dynamic-html-component/70054 "2025-04-01T10:04:12Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![contact23585](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/contact23585/32/24537_2.png) [@contact23585](https://forum.wixstudio.com/u/contact23585)\
**Post date:** [April 1, 2025, 10:04am UTC](https://forum.wixstudio.com/t/dynamic-html-component/70054/1 "2025-04-01T10:04:12Z")

</div>

Hi,

I am trying to dynamically update my HTML component based on the content stored for each item in the data collection.

My code almost work but still cant manage to make it happen and display the final widget form. Maybe am I missing something, could someone help ?

Here is the page code :

$w.onReady(() =\> {  
const currentItem = $w(“#dynamicDataset”).getCurrentItem();  
$w(‘#text352’).text = currentItem.html;  
$w(“#dynamicDataset”).onReady(() =\> {  
const currentItem = $w(“#dynamicDataset”).getCurrentItem();  
if (currentItem && currentItem.html) {  
// Envoie le contenu HTML à l’élément HTML via postMessage  
$w(“#htmlComponent”).postMessage({ htmlContent: currentItem.html });  
console.log(“Message envoyé avec le contenu HTML.”);  
} else {  
console.warn(“Contenu HTML non trouvé dans l’item courant.”);  
}  
});  
});

Here is the HTML component code :

Example 2 :

For now, I just have this display “[object Object]”

Thanks in advance for your help !

Victor

---

<div class="post-metadata">

**Author:** ![onemoretime](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/onemoretime/32/104023_2.png) [@onemoretime](https://forum.wixstudio.com/u/onemoretime)\
**Post date:** [April 1, 2025, 3:42pm UTC](https://forum.wixstudio.com/t/dynamic-html-component/70054/2 "2025-04-01T15:42:18Z")

</div>

Hi, @contact23585 !!

This past topic might be related. Apologies if my response is off the mark. 😇

> [@CMS: Import HTML to Rich Content (Insert HTML Code)](https://forum.wixstudio.com/t/cms-import-html-to-rich-content-insert-html-code/59508):
>
> Question: How do I import HTML into CMS with Rich Content Field? Product: Wix Editor \> CMS I have a Database with a Rich Content Field where I imbed HTML Manually, there is no problem, but I want to import data into my database and cannot figure out how to “imbed” the HTML I exported my data to see what is generated, and this is what it came out as: The actual thing I wanted to do display the image from the url, WITHOUT uploading to media, but could not find another way to do it…

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [April 17, 2025, 6:31pm UTC](https://forum.wixstudio.com/t/dynamic-html-component/70054/3 "2025-04-17T18:31:03Z")

</div>

Salut Victor!

Well to be able to recieve → DATA ← inside your HTML-Comp. you will need also to put in some code into your HTML-Component and save it.

For example…

```javascript
<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background: black;
        padding: 10px;
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="content">Waiting for content...</div>

    <script>
      // Listen for postMessage from the page code
      window.onmessage = (event) => {
        if (event.data && event.data.htmlContent) {
          // Safely inject the received HTML
          document.getElementById("content").innerHTML = event.data.htmlContent;
        } else {console.warn("No htmlContent received.");}
      };
    </script>
  </body>
</html>

```

This is what will make your HTML-Component be possible to recieve data …

```javascript
 window.onmessage = (event) => {...........};

```

As soon something has been sent to your HTML-Component, this FUNCTION will catch the data!

And if you would type in → HTML-COMPONENT ← into the searchbar → what do you think you would get as output ???

 ![2025-04-17 20_34_54-Window](https://us1.discourse-cdn.com/wix/original/3X/8/4/848d5f44be5cd72f573ead8384ddb4720c42d67e.png)