# Dashboard-2 ui-template

**URL:** <https://discourse.nodered.org/t/dashboard-2-ui-template/98604>\
**Category:** Dashboard\
**Tags:** dashboard-2, ui-template\
**Created:** [11 August 2025 16:38 UTC](https://discourse.nodered.org/t/dashboard-2-ui-template/98604 "2025-08-11T16:38:47Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![SergioRT](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sergiort/32/19289_2.png) [@SergioRT](https://discourse.nodered.org/u/SergioRT)\
**Post date:** [11 August 2025 16:38 UTC](https://discourse.nodered.org/t/dashboard-2-ui-template/98604/1 "2025-08-11T16:38:47Z")

</div>

I am becoming nuts !

This is the configuraton of a simple ui-template

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/4/d4735c69c5512b3cac82bcc8c617a1904d897e26.png)

And this is the result

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

HTML interpretation does not work !

Did I do somethng wrong ? Is there something special to configure ?

Thanks for your answer !

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [11 August 2025 17:19 UTC](https://discourse.nodered.org/t/dashboard-2-ui-template/98604/2 "2025-08-11T17:19:57Z")

</div>

When you first go into the template config there is some sample content. The relevant bit here is to include your template between `<template>` and `</template>` tags.

---

<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:** [11 August 2025 17:20 UTC](https://discourse.nodered.org/t/dashboard-2-ui-template/98604/3 "2025-08-11T17:20:31Z")

</div>

template nodes use the `Vuetify` framework. I'm not sure if it supports all pure HTML tags.  
Best is to use the Vuetify classes, which offer rich built-in formatting options, and ability to bind the HTML objects to your data.  
for example:

```auto
<template>
  <v-list>
    <v-list-item-title>• chapter 1</v-list-item-title>
      <v-list class="ml-4">
        <v-list-item-title>- section 1.1</v-list-item-title>
        <v-list-item-title>- section 1.2</v-list-item-title>
      </v-list> 
    <v-list-item-title>• chapter 2</v-list-item-title>
  </v-list>
</template>

```

Or if you want to bind it to your data:

```auto
<template>
  <v-list>
    <v-list-item v-for="(item, index) in items" :key="index">
      <v-list-item-content>
        <v-list-item-title>• {{ item }}</v-list-item-title>
      </v-list-item-content>
    </v-list-item>
  </v-list>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item One', 'Item Two', 'Item Three']
    };
  }
};
</script>

```

---

<div class="post-metadata">

**Author:** ![SergioRT](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sergiort/32/19289_2.png) [@SergioRT](https://discourse.nodered.org/u/SergioRT)\
**Post date:** [11 August 2025 17:24 UTC](https://discourse.nodered.org/t/dashboard-2-ui-template/98604/4 "2025-08-11T17:24:08Z")

</div>

Thanks for your answer but t does not change anything. I already tried ….

---

<div class="post-metadata">

**Author:** ![SergioRT](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sergiort/32/19289_2.png) [@SergioRT](https://discourse.nodered.org/u/SergioRT)\
**Post date:** [11 August 2025 17:26 UTC](https://discourse.nodered.org/t/dashboard-2-ui-template/98604/5 "2025-08-11T17:26:03Z")

</div>

Thanks ! I think it s a good explanation …

I am going to study Vue …

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [12 August 2025 08:31 UTC](https://discourse.nodered.org/t/dashboard-2-ui-template/98604/6 "2025-08-12T08:31:39Z")

</div>

> [@omrid](#):
>
> I'm not sure if it supports all pure HTML tags.

It will support all vanilla Javascript and HTML. Vuetify will give you nicely styled widgets out of the box though.

The missing piece here is the `<template>` tags as specified in the [documentation](https://dashboard.flowfuse.com/nodes/widgets/ui-template#writing-custom-widgets). You will also need to specify the relevent styling you want to see with some CSS, e.g:

```auto
<style>
    ul {
       list-style: disc;
    }
</style>

```

---

<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:** [12 August 2025 10:01 UTC](https://discourse.nodered.org/t/dashboard-2-ui-template/98604/7 "2025-08-12T10:01:58Z")

</div>

Thanks Joe.  
So I understand that in such cases, the Vuetify CSS needs to be reset back to the HTML default.

BTW, in the current example, it seems that the style should include padding.

```auto
<style>
    ul {
       padding-left: 1.5rem;
    }
</style>

```

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

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [12 August 2025 10:51 UTC](https://discourse.nodered.org/t/dashboard-2-ui-template/98604/8 "2025-08-12T10:51:58Z")

</div>

> [@omrid](#):
>
> So I understand that in such cases, the Vuetify CSS needs to be reset back to the HTML default.

Vuetify clears default styling, and then adds it’s own for the Vuetify widgets only. If you’re using vanilla HTML, there will be no default styling applied, hence you need to define your own.

---

<div class="post-metadata">

**Author:** ![SergioRT](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sergiort/32/19289_2.png) [@SergioRT](https://discourse.nodered.org/u/SergioRT)\
**Post date:** [15 August 2025 13:36 UTC](https://discourse.nodered.org/t/dashboard-2-ui-template/98604/9 "2025-08-15T13:36:45Z")

</div>

Thanks every one for your answer.

Here is my node ui\_template

```auto
<template>
 {{ msg.payload }}
</template>

<style>
ul {
list-style: disc;
    }
</style>

```

the result is always the same

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/d/fd3e008826b97cf5b7e255d0a824cc5396aa6792.png)

This is working with ui-template from dashboard v1 ….

I find it a shame that it doesn't work as well with a new version of the dashboad, which is great, that said by the way

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [15 August 2025 16:25 UTC](https://discourse.nodered.org/t/dashboard-2-ui-template/98604/10 "2025-08-15T16:25:09Z")

</div>

> [@SergioRT](#):
>
> ```auto
> <template>
> {{ msg.payload }}
> </template>
> 
> ```

What are you sending in `msg.payload` (we cannot see from the picture and you have not provided a export of your flow)?

> [@SergioRT](#):
>
> I find it a shame that it doesn't work as well with a new version of the dashboad

It works the same but different (you are using it wrong 😉 )

Did you try the working example offered by @omrid above?

---

<div class="post-metadata">

**Author:** ![SergioRT](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sergiort/32/19289_2.png) [@SergioRT](https://discourse.nodered.org/u/SergioRT)\
**Post date:** [16 August 2025 15:10 UTC](https://discourse.nodered.org/t/dashboard-2-ui-template/98604/11 "2025-08-16T15:10:26Z")

</div>

Here is my flow, very simple

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

one template is for dashboard v1 : it contains

```auto
<div ng-bind-html="msg.payload"></div>

```

this is the result

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/f/af640e7965c9610e4e2d8f83715d83299c759120.png)

the other template is for dashboard v2, it contains

```auto
<template>
    {{ msg.payload }}
</template>

```

this is the result

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/1/913c1cbf0c23933f974effbb99406f11bea83a18.png)

If template for dashboard 2 contains

```auto
<template>
   <div ng-bind-html="msg.payload"></div>
</template>

```

nothing is printed !

So they do not work exactly in the same way !

Or what did I do wrong ?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [16 August 2025 15:27 UTC](https://discourse.nodered.org/t/dashboard-2-ui-template/98604/12 "2025-08-16T15:27:21Z")

</div>

> [@SergioRT](#):
>
> Here is my flow, very simple
> 
> ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/3/f355494622f4868f94033422da9b87477df5fdf6.png)

A screenshot cannot be imported by a user trying to help you. When someone asks you to share a flow they mean share the flow JSON (ctrl-e export)

> [@SergioRT](#):
>
> If template for dashboard 2 contains
> 
> ```auto
> <template>
> <div ng-bind-html="msg.payload"></div>
> </template>
> 
> ```
> 
> nothing is printed

Dashboard 2 is Vue not AngularJS. It would help you to read the extensive docs: [Template ui-template | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/nodes/widgets/ui-template)

Vue docs for binding html: [Built-in Directives | Vue.js](https://vuejs.org/api/built-in-directives.html#v-html)

E.g:

```html
<template>
   <div v-html="msg.payload"></div>
</template>

```

However this is NOT the best way to use dashboard templates. Binding html on divs is not advised.

As already pointed out, you can get pretty consistent visual styles and benefit from the many capable [Vuetify components](https://vuetifyjs.com/en/components/all/) that would be very difficult to achieve in plain html.

---

<div class="post-metadata">

**Author:** ![SergioRT](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sergiort/32/19289_2.png) [@SergioRT](https://discourse.nodered.org/u/SergioRT)\
**Post date:** [3 September 2025 09:29 UTC](https://discourse.nodered.org/t/dashboard-2-ui-template/98604/13 "2025-09-03T09:29:29Z")

</div>

Thanks for your answer.

I plan to study Vuetify as soon as possible. It seems to be a good way to develop front-end.

---

<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:** [3 October 2025 09:29 UTC](https://discourse.nodered.org/t/dashboard-2-ui-template/98604/14 "2025-10-03T09:29:58Z")

</div>

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