{"id":13397614,"url":"https://github.com/node-red/node-red-dashboard","last_synced_at":"2025-05-14T07:10:21.524Z","repository":{"id":8367641,"uuid":"58145930","full_name":"node-red/node-red-dashboard","owner":"node-red","description":"A dashboard UI for Node-RED","archived":false,"fork":false,"pushed_at":"2024-06-28T08:39:11.000Z","size":24653,"stargazers_count":1343,"open_issues_count":88,"forks_count":458,"subscribers_count":82,"default_branch":"master","last_synced_at":"2025-04-13T20:18:00.754Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/node-red.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-05-05T16:42:19.000Z","updated_at":"2025-04-07T15:14:29.000Z","dependencies_parsed_at":"2024-01-29T09:18:41.981Z","dependency_job_id":"dd3d453b-6790-4942-a9a5-68fa82df6af6","html_url":"https://github.com/node-red/node-red-dashboard","commit_stats":{"total_commits":1514,"total_committers":57,"mean_commits":26.56140350877193,"dds":0.2985468956406869,"last_synced_commit":"3bc679f92752e72126a2b309258814f0dfb65ea2"},"previous_names":[],"tags_count":112,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/node-red%2Fnode-red-dashboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/node-red%2Fnode-red-dashboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/node-red%2Fnode-red-dashboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/node-red%2Fnode-red-dashboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/node-red","download_url":"https://codeload.github.com/node-red/node-red-dashboard/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254092792,"owners_count":22013290,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-30T18:01:34.773Z","updated_at":"2025-05-14T07:10:16.513Z","avatar_url":"https://github.com/node-red.png","language":"HTML","readme":"# node-red-dashboard\n\n[![platform](https://img.shields.io/badge/platform-Node--RED-red)](https://nodered.org)\n![NPM version](https://badge.fury.io/js/node-red-dashboard.svg)\n![NPM](https://img.shields.io/npm/l/node-red-dashboard)\n\n**ANNOUNCEMENT** - As of 27th June 2024 this project should be considered deprecated. We will leave it here so it can still be installed if necessary, but no new development will take place. For production use you should consider one of the other alternatives The most direct replacement is the [Flowfuse Dashboard](https://github.com/FlowFuse/node-red-dashboard) - but [UIBUILDER](https://flows.nodered.org/node/node-red-contrib-uibuilder) may also be a good alternative.\n\nThis module provides a set of nodes in Node-RED to quickly create a live data dashboard.\n\nThese nodes require node.js version 12 or more recent. The last version to support node v8 was 2.30.0.\n\nFrom version 2.10.0 you can create and install widget nodes like other Node-RED nodes.\nSee the [Wiki](https://github.com/node-red/node-red-dashboard/wiki/Creating-New-Dashboard-Widgets) for more information.\n\nFor the latest updates see the [CHANGELOG.md](https://github.com/node-red/node-red-dashboard/blob/master/CHANGELOG.md)\n\n**NOTE:** - This project is based on Angular v1 - As that is now no longer maintained, this project should be considered to be on \"life support\". Small patches will be applied on a best can do basis, but there will be no major feature upgrades, and underlying security breakage may occur.\n\n![Dashboard example](http://nodered.org/images/dashboarde.png)\n\n## Pre-requisites\n\nThe Node-RED-Dashboard requires [Node-RED](https://nodered.org) to be installed.\n\n## Install\n\nTo install the stable version use the `Menu - Manage palette` option and search for `node-red-dashboard`, or run the following command in your Node-RED user directory - typically `~/.node-red`:\n\n    npm i node-red-dashboard\n\nRestart your Node-RED instance and you should have UI nodes available in the palette and a new `dashboard` tab in the\nright side panel. The UI interface is available at \u003chttp://localhost:1880/ui\u003e (if the default settings are used).\n\nIf you want to try the latest version from github, you can install it by\n\n    npm i node-red/node-red-dashboard\n\n## Settings\n\nThe default url for the dashboard is based off your existing Node-RED httpRoot path with /ui added. This can be changed in your Node-RED settings.js file.\n\n```\nui: { path: \"ui\" },\n```\n\nYou can also add your own express middleware to handle the http requests by using the `ui: { middleware: your_function }` property in settings.js. For example\n\n```\nui: { middleware: function (req, res, next) {\n            // Do something more interesting here.\n            console.log('LOGGED')\n            next()\n        }\n    },\n```\n\nYou can also add middleware to the websocket connection using\n\n```\nui: { ioMiddleware: function (socket, next) {\n            // Do something more interesting here.\n            console.log('HELLO')\n            next()\n        }\n    },\n```\n\n**Note**: both of these also accept an array of functions if you need to pass in multiple middleware actions.\n\nSetting your own ioMiddleware will disable the default cross domain origin check.\n\nYou can also set the dashboard to be read only by `ui: { readOnly: true }`. This does not stop the user interacting with the dashboard but does ignore all updates coming from the dashboard.\n\nFinally you can customise the default Group name (for i18n) by setting\n```\nui: { defaultGroup: \"Better Default\" }\n```\n\nYou can of course combine any combination of these properties\n\n## Layout\n\nThe dashboard layout should be considered as a grid.\n\nEach **group** element has a width - by default 6 'units' (a unit is 48px wide by default with a 6px gap).\n\nEach **widget** in the group also has a width - by default, 'auto' which means it will fill the width of the group it is in, but you can set it to a fixed number of units.\n\nThe layout algorithm of the dashboard always tries to place items as high and to the left as they can within their container - this applies to how groups are positioned on the page, as well as how widgets are positioned in a group.\n\nGiven a group with width 6, if you add six widgets, each with a width of 2, then they will be laid out in two rows - three widgets in each.\n\nIf you add two groups of width 6, as long as your browser window is wide enough, they will sit alongside each other. If you shrink the browser, at some point the second group will shift to be below the first, in a column.\n\nIt is advisable to use multiple groups if possible, rather than one big group, so that the page can dynamically resize on smaller screens.\n\n## Features\n\n#### Dashboard sidebar\n\nThe widget layout is managed by a `dashboard` tab in the sidebar of the Node-RED editor.\n\n##### Layout\n\n - **Tabs** - From here you can re-order the tabs, groups and widgets, and add and edit their properties. You can also open the layout tools that may help you organise the widgets more easily than via the sidebar.\n\n - **Links** - to other web pages can also be added to the menu. They can optionally be opened in an iframe - if allowed by the target page.\n\n##### Site\n\n - **Title** - the `title` of the UI page can be set.\n\n - **Options** - optionally hide the title bar, and allow swiping sideways between tabs on a touch screen. You can also set whether the template uses the selected theme or uses the underlying Angular Material theme. You can also choose to use the Angular Material theme everywhere.\n\n - **Date Format** - sets the default date format for chart and other labels.\n\n - **Sizes** - sets the basic geometry of the grid layout in pixels. The **width** and **height** of widgets can be set, as can the width of *groups*. These are the basic definitions of the \"units' used elsewhere within the dashboard.\n\n##### Theme\n\n  - **Style** - the theme and font of the UI is set in the dashboard sidebar. You can select a default Light, Dark or Custom Theme. You cannot have different themes for each tab.\n\nYou can also choose to use the basic Angular Material themes instead if you like, either just within any ui_templates or for the whole Dashboard. This will only affect angular components so some of the charts and so on may need extra work.\n\n**Note**: For users creating their own templates the following CSS variable names are available\nto help pick up the theme colours.\n\n - --nr-dashboard-pageBackgroundColor\n - --nr-dashboard-pageTitlebarBackgroundColor\n - --nr-dashboard-pageSidebarBackgroundColor\n - --nr-dashboard-groupBackgroundColor\n - --nr-dashboard-groupTextColor\n - --nr-dashboard-groupBorderColor\n - --nr-dashboard-widgetColor\n - --nr-dashboard-widgetTextColor\n - --nr-dashboard-widgetBgndColor\n\n#### Widgets\n\nDon't forget there are also extra ui widgets available on the [Node-RED flows](http://flows.nodered.org) website. Search for node-ui- or contrib-ui- .\n\nGroup labels are optional.\n\nMost widgets can have a label and value - both of these can be specified by properties of the incoming msg if required, and modified by angular filters. For example the label can be set to `{{msg.topic}}`, or the value could be set to `{{value | number:1}}%` to round the value to one decimal place and append a % sign.\n\nEach node may parse the `msg.payload` to make it suitable for display. This converted version is exposed as the variable called `value`, (see example above).\n\nAny widget can be disabled by passing in a `msg.enabled` property set to `false;`. *Note:* this doesn't stop the widget receiving messages but does stop inputs being active and does re-style the widget.\n\nMost widgets and the ui **group** can have a CSS class or multiple CSS class names. This permits the user to override styles one or more widgets and their inner contents. e.g to colourise a warning toast, add the CSS class `notification-warn` to the **notification** widget and add a **ui-template** (set to \"Add to site head section\")...\n```html\n\u003cstyle\u003e\n  md-toast.notification-warn {\n    border-width: 10px;\n    border-color: darkorange;\n  }\n  md-toast.notification-warn \u003e h3 {\n    background-color: orange;\n  }\n  md-toast.notification-warn \u003e div {\n    background: rgba(245, 173, 66, 0.5);\n    color: darkorange;\n  }\n\u003c/style\u003e\n```\nAdditionally, any widget that has a Class field can be dynamically updated by passing in a `msg.className` string property set to one or more class names.\n\nMost ui widgets can also be configured by using a `msg.ui_control` message - see **[config-fields.md](https://github.com/node-red/node-red-dashboard/blob/master/config-fields.md)**\nfor further details.\n\n  - **Audio out** - a widget that will let you play audio (wav or mp3) or send Text to Speech (TTS) to the client.\n  - **Button** - the icon can be set using either Material or fa-icons - the colour and background colour may also be set. If the widget is sized to 1 wide the icon has precedence.\n  - **Chart** - has both line, bar and pie chart modes. Also the X-Axis labels can be customised using a date formatter string. See **[this document](https://github.com/node-red/node-red-dashboard/blob/master/Charts.md)** for more information on the chart data formats accepted.\n  - **Colour Picker** - a colour picker widget.\n  - **Date Picker** - a date picker widget. The displayed Date format can be specified in the Site tab using moment.js formatting.\n  - **Dropdown** - a dropdown select widget has been added. Multiple label, value pairs can be specified. The choices can also be set via `msg.options` containing an array of objects. If just text then the value will be the same as the label, otherwise you can specify both by using an object of \"label\":\"value\" pairs :\n\n        [ \"Choice 1\", \"Choice 2\", {\"Choice 3\": 3} ]\n\n     Setting `msg.payload` will pre-select the value in the dropdown.\n  - **Form** - a widget that can be composed of several sub-widgets. When submitted all values are submitted as a single message.\n  - **Gauge** - has 4 modes - *standard* (simple gauge), *donut* (complete 360\u0026deg;), *compass*, and *wave*. You can also specify the colour range of the standard and donut gauges.\n  - **Notification** - creates alerts to the user - can either be a toast popup, or a dismissable alert box. The alert may be targeted to a single user.\n  - **Numeric** - a Numeric input widget with up/down buttons.\n  - **Slider** - a simple horizontal slider, with variable step size.\n  - **Switch** - can also set two icons and/or colours depending on state.\n  - **Template** - the template node allows the user to specify and create their own widgets within the framework using HTML, Javascript. This is an Angular.js widget. You may also use this to override the built in CSS styles.\n  - **Text** - A read only widget, the layout of the `label`, and `value` can be configured.\n  - **Text input** - text input box, with optional label, can also support password, email and colour modes.\n  - **UI-Control** - allows some dynamic control of the dashboard. Sending a `msg.payload` of the tab number (from 0) or tab_name will switch to that tab. Tabs can be enabled/disabled/hide/show via msg like `{\"tabs\":{\"hide\":[\"tab_name_with_underscores\"],\"show\":[\"another_tab_name\"],\"disable\":[\"unused_tab_name\"]}}`.\n  Groups can be hidden and made visible via a msg like `{\"group\":{\"hide\":[\"tab_name_group_name_with_underscores\"],\"show\":[\"tab_name_another_group\"],\"focus\":true}}`. Outputs a `msg.payload` for every browser *connect* and *loss*, and every tab *change*. This can be used to trigger other actions like resetting the visibility of tabs and groups.\n\n**Tip:** The *Text* widget will accept html - so you can use it together with the *fa-icons* we\nalready use to create indicator type widgets.\n\n## Icons\n\nThe dashboard has 4 sets of icons built in. They are\n\n - [Angular Material icons](https://klarsys.github.io/angular-material-icons/) : e.g. `send`\n - [Font Awesome 4.7](https://fontawesome.com/v4.7.0/icons/) : e.g. `fa-fire fa-2x`\n - [Weather Icons Lite](https://github.com/Paul-Reed/weather-icons-lite/blob/master/css_mappings.md) : e.g. `wi-wu-sunny`\n - [Material Design Iconfont](https://jossef.github.io/material-design-icons-iconfont/) ; e.g. `mi-alarm_on` - note add mi- to the icon name in the iconset.\n\nAnd one that can only be used if you have a permanent connection to the internet\n\n - [Iconify](https://iconify.design/icon-sets/) : e.g. `iconify-mdi:car-battery 48px`\n\nAgain note you have to add `iconify-` to the icon name in the icon set of your choice. You may also optionally specify a size in standard px or em notation. Default is 24px. You must also add a **ui_template** node that loads the necessary iconify library into the header of the dashboard. It should contain\n\n```\n\u003cscript src=\"https://code.iconify.design/1/1.0.7/iconify.min.js\"\u003e\u003c/script\u003e\n```\n\nOnce you have done that then you can also use them more generally, for example\n```\n\u003cspan class=\"iconify icon:wi:sunset icon-inline:false\"\u003e\u003c/span\u003e\n```\n\nYou may also create your own set of icons using [Icofont](https://icofont.com/icons). Once downloaded you can serve them locally via Node-RED and add them to the head of the dashboard page by using a ui_template node : e.g.\n\n```\n\u003clink rel=\"stylesheet\" href=\"myserver/path/icofont.css\"\u003e\n```\nthen you can use then as per above by adding the icofont- prefix e.g. `icofont-badge`\n\nOr just use them in a template\n\n```\n\u003clink rel=\"stylesheet\" href=\"/css/icofont.css\"\u003e\n\u003cdiv style=\"display: flex;height: 100%;justify-content: center;align-items: center;\"\u003e\n\u003ci class=\"icofont icofont-4x icofont-hail\"\u003e\u003c/i\u003e\n\u003c/div\u003e\n```\n\n And finally via an image - https://{myserver/path/image.png}\n\nYou can use them in any of the Icon fields. You may also be able to use some of them for example in labels via their inline style eg `\u003ci class=\"fa fa-flag\"\u003e\u003c/i\u003e`\n\n\n## Loading the Dashboard\n\nDue to the size of the dashboard libraries it can take a long time to load if you are running on wireless network. It is possible add a custom loading page if you wish. To do so add a file called `loading.html` to the `node_modules/node-red-dashboard/dist/` folder. A simple example could be\n\n```\n \u003cdiv\u003e\u003ci class=\"fa fa-spin fa-5x fa-spinner\"\u003e\u003c/i\u003e\u003c/div\u003e\n ```\n\n## Securing the Dashboard\n\nYou can use the `httpNodeAuth` property in your Node-RED settings.js file to secure the Dashboard as it is\ncreated the same way as other HTTP nodes are. The details can be found at the bottom of this page in the\ndocs \u003chttp://nodered.org/docs/security\u003e\n\n## Multiple Users\n\nThis Dashboard does NOT support multiple individual users. It is a view of the status of the underlying\nNode-RED flow, which itself is single user. If the state of the flow changes then all clients will get\nnotified of that change.\n\nMessages coming from the dashboard **do** have a `msg.socketid`, and updates like change of tab,\nnotifications, and audio alerts will be directed only to that session. Delete the `msg.sessionid` to send\nto all sessions.\n\n## Discussions and suggestions\n\nUse the Node-RED Discourse Forum: https://discourse.nodered.org/c/dashboard\nor the Dashboard-ui channel in \u003ca href=\"http://nodered.org/slack/\"\u003eSlack\u003c/a\u003e to ask\nquestions or to discuss new features.\n\nThe current work in progress list is shown in the\n\u003ca href=\"https://github.com/node-red/node-red-dashboard/projects/1\" target=\"_blank\"\u003e Github Project\u003c/a\u003e.\n\n## Contributing\n\nBefore raising a pull-request, please read our\n[contributing guide](https://github.com/node-red/node-red-dashboard/blob/master/CONTRIBUTING.md).\n\nThis project adheres to the [Contributor Covenant 1.4](http://contributor-covenant.org/version/1/4/).\nBy participating, you are expected to uphold this code. Please report unacceptable\nbehavior to any of the [project's core team](https://github.com/orgs/node-red/teams/core).\n\n## Developers\n\n```\ncd ~\\.node-red\\node_modules\ngit clone https://github.com/node-red/node-red-dashboard.git\ncd node-red-dashboard\nnpm install\n```\nThe plugin uses the ```dist``` folder if it exists. Make sure it has been deleted if you want to use the non-minified version while developing.\nAfter finishing changes to the front-end code in the src folder, you can use ```gulp``` to update and rebuild the minified files and update the *appcache* manifest.\n\n    gulp\n\nWe also have suggested *lint* and *js* styles that can be checked with:\n\n    gulp lint\n    gulp jscs\n\nIf submitting a Pull Request (PR) please do NOT include the minified `/dist` files.\n\nThank you.\n\n\u003cimg src=\"http://nodered.org/images/dashboardl.png\"/\u003e\n","funding_links":[],"categories":["HTML","Visualization, Dashboards","Nodes"],"sub_categories":["Misc","UI"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnode-red%2Fnode-red-dashboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnode-red%2Fnode-red-dashboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnode-red%2Fnode-red-dashboard/lists"}