# HTML in ui-template via message?

**URL:** <https://discourse.nodered.org/t/html-in-ui-template-via-message/100215>\
**Category:** Dashboard\
**Created:** [22 January 2026 01:09 UTC](https://discourse.nodered.org/t/html-in-ui-template-via-message/100215 "2026-01-22T01:09:43Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jibun-no-Kage](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jibun-no-kage/32/99316_2.png) [@Jibun-no-Kage](https://discourse.nodered.org/u/Jibun-no-Kage)\
**Post date:** [22 January 2026 01:09 UTC](https://discourse.nodered.org/t/html-in-ui-template-via-message/100215/1 "2026-01-22T01:09:43Z")

</div>

If I have the following in a ui-template...

```auto
<template>
    <div>
        <p>{{ msg.log }}</p>
    </div>
</template>

```

and msg.log = "1\<br\>2\<br\>3"

I get...

```auto
1<br>2<br>3

```

via the template view in dashboard, not...

```auto
1
2
3

```

Is there some (new) trick in dashboard 2.0 to get HTML in message to be seen as HTML? I tried msg.log = "1\n\r2\n\r3" but was not surprised that, that did not work.

---

<div class="post-metadata">

**Author:** ![Jibun-no-Kage](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jibun-no-kage/32/99316_2.png) [@Jibun-no-Kage](https://discourse.nodered.org/u/Jibun-no-Kage)\
**Post date:** [22 January 2026 05:16 UTC](https://discourse.nodered.org/t/html-in-ui-template-via-message/100215/2 "2026-01-22T05:16:52Z")

</div>

OK... this is not exactly what I asked but it works, to insert new lines into payload string(s).

Template...

```auto
<template>
    <div>
        <span class='log-output'> {{msg.payload}} </span>
    </div>
</template>
<script>
    export default {
        // Must Exist For Template To Work
    }
</script>
<style>
    .log-output {
        white-space: pre;
    }
</style>

```

So apparently under dashboard 2.0, new line will be recognized via the style above. Using an array of strings, or a ring buffer of message payloads, say time stamps, join them using javascript new line, i.e. '\n\r', as delimiter via join.

```auto
msg.payload = msg.payload.join('\n\r')

```

The results...

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/7/7744835cded000b23a8d42be436dc2e58878eaa3.png)

---

<div class="post-metadata">

**Author:** ![omrid](https://avatars.discourse-cdn.com/v4/letter/o/77aa72/32.png) [@omrid](https://discourse.nodered.org/u/omrid)\
**Post date:** [22 January 2026 10:00 UTC](https://discourse.nodered.org/t/html-in-ui-template-via-message/100215/3 "2026-01-22T10:00:15Z")

</div>

Same thing happens when you try to display other HTML-formatted text, like a bulleted list. This is because the Vue framework sets its own CSS on top of the default raw HTML styling.  
One way to solve this is what you did (override with your own style). Another option is to use the built-in Vuetify directive `v-html`

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [21 February 2026 10:00 UTC](https://discourse.nodered.org/t/html-in-ui-template-via-message/100215/4 "2026-02-21T10:00:25Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.