# Changing Node red dashboard home page

**URL:** <https://discourse.nodered.org/t/changing-node-red-dashboard-home-page/96120>\
**Category:** Dashboard\
**Tags:** node-red-dashboard, docker\
**Created:** [19 March 2025 23:30 UTC](https://discourse.nodered.org/t/changing-node-red-dashboard-home-page/96120 "2025-03-19T23:30:33Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![hipatel93](https://avatars.discourse-cdn.com/v4/letter/h/dfb087/32.png) [@hipatel93](https://discourse.nodered.org/u/hipatel93)\
**Post date:** [19 March 2025 23:30 UTC](https://discourse.nodered.org/t/changing-node-red-dashboard-home-page/96120/1 "2025-03-19T23:30:33Z")

</div>

Hi Everyone

Hope you are doing well!

I am new in node-red and still learning, you can say 0 level skills.

I am looking for your help with the following issue, before that I am developing an app for my Home Base SCADA application.

So I just wanted to change the Node-red icon and some text to specific text and icons, especially for a node-red dashboard.

So far I have updated \.node-red\node\_modules\node-red-dashboard\dist\index.html, Also change Icone. but still not working.

I am using docker to run node-red.

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

---

<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:** [19 March 2025 23:38 UTC](https://discourse.nodered.org/t/changing-node-red-dashboard-home-page/96120/2 "2025-03-19T23:38:30Z")

</div>

Hi. Since you are just starting out, I'd probably recommend not using node-red-dashboard (aka dashboard 1) as it is depreciated. Instead, @flowfuse/node-red-dashboard (aka #dashboard-2) which is in active development.

> **[Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/)**
>
> Discover the features and benefits of Node-RED Dashboard 2.0, designed to streamline and enhance your Node-RED experience.

---

<div class="post-metadata">

**Author:** ![hipatel93](https://avatars.discourse-cdn.com/v4/letter/h/dfb087/32.png) [@hipatel93](https://discourse.nodered.org/u/hipatel93)\
**Post date:** [19 March 2025 23:48 UTC](https://discourse.nodered.org/t/changing-node-red-dashboard-home-page/96120/3 "2025-03-19T23:48:14Z")

</div>

Hi Steve

I have to use some SVG so have to use dashboard not dashboard 2.

---

<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:** [19 March 2025 23:51 UTC](https://discourse.nodered.org/t/changing-node-red-dashboard-home-page/96120/4 "2025-03-19T23:51:55Z")

</div>

You can do SVG in dashboard 2 (in UI-template) but I understand why you might want to use old dashboard for the dedicated svg node.

---

<div class="post-metadata">

**Author:** ![hipatel93](https://avatars.discourse-cdn.com/v4/letter/h/dfb087/32.png) [@hipatel93](https://discourse.nodered.org/u/hipatel93)\
**Post date:** [20 March 2025 02:10 UTC](https://discourse.nodered.org/t/changing-node-red-dashboard-home-page/96120/5 "2025-03-20T02:10:29Z")

</div>

How, is it possible?  
can you please share me any example?

---

<div class="post-metadata">

**Author:** ![kitori](https://avatars.discourse-cdn.com/v4/letter/k/f08c70/32.png) [@kitori](https://discourse.nodered.org/u/kitori)\
**Post date:** [20 March 2025 06:21 UTC](https://discourse.nodered.org/t/changing-node-red-dashboard-home-page/96120/6 "2025-03-20T06:21:24Z")

</div>

I recently start using uibuilder, there it is possible. My approach:

index.html

```auto
<!doctype html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="../uibuilder/images/node-blue.ico">

    <title>Minimal modern ESM client example - Node-RED uibuilder</title>
    <meta name="description" content="Node-RED uibuilder - Minimal modern ESM client example">

    <!-- Your own CSS -->
    <link type="text/css" rel="stylesheet" href="./index.css" media="all">

    <!-- NOTE this MUST be loaded as a MODULE. Also, uib client loaded in index not here -->
    <script type="module" async src="./index.js">
        /* Your custom code + Imports uibuilder */
    </script>
<style>
    svg {
    width: 100%;
    max-width: 600px;
    display: block;
    margin: auto;
    }
    
    text {
    font-size: 14px;
    font-weight: bold;
    text-anchor: middle;
    }
</style>
</head>

<body class="">
    <svg viewBox="0 0 400 400">
        <!-- Komponenten -->
        <rect id="pv" x="150" y="20" width="100" height="50" fill="gold" stroke="black" />
        <text x="200" y="45">PV-Power</text>
        <text id="pv_power" x="200" y="60">0 kW</text>
    </svg>
</body>

</html>

```

and in index.js i have this little function:

```auto

function updateFlows(pvPower) {
    document.getElementById('pv_power').textContent = pvPower.toFixed(2) + ' kW';
}

// Listen for incoming messages from Node-RED and action
uibuilder.onChange('msg', (msg) => {
    // do stuff with the incoming msg
    if (msg.topic == "updateFlow") {
        updateFlows(msg.payload)
    }
})

```

![Bildschirmaufnahme-2025-03-20-071900](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/5/25f875c5863b33ae7d7692930960dc824a81dc59.gif)

---

<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:** [19 April 2025 06:21 UTC](https://discourse.nodered.org/t/changing-node-red-dashboard-home-page/96120/7 "2025-04-19T06:21:59Z")

</div>

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