---
title: Totally Information web-components Roadmap
description: >
  This page outlines the future direction of the components. Including specific things that will almost certainly happen as well as more speculative ideas.
created: 2022-04-08 17:12:11
updated: 2025-09-19 18:21:32
---

You can find the current list of components on the main [README](./README.md) page.

## Next

* [ ] Rename source files from *.js to *.mjs for better clarity and linting
* [ ] New experiment: ECHarts and Plot - Core component/class + selection of simple charts. Expose library to allow full control.
* [ ] NEW: check-list
* [ ] Allow override of the gauge values for led-gauge. [Ref](https://discourse.nodered.org/t/horizontal-bar-graph/98000/2?u=totallyinformation).
* [ ] Add optional status div to <button-send>. See uibuilder example flow.

## Other thoughts

For v2.x, change `dist` such that all components are in the root rather than being split into alpha, beta and live. Making it easier for people to use them.

* Add "all" load library for simplified use (loads all live and beta components).

* Add a config fragment to each component that can be used by a configuration component. This would allow a visual configuration component to be created (a-la Node-RED Dashboard).

* Incorporate hotnipi's gauge component.

* Expand _uibMsgHandler to allow for msg.payload.attributes. Use a uibuilder fn instead of a local one.

* Use a packaged version of uib-brand.css instead of the one in the `dist` folder.

* Allow an option on base to listen for specific events - only with uibuilder, send the events to Node-RED.

* Some way to create a visual layout based on an input JSON. With a way to dynamically change the layout. The idea being to enable an entire page to be laid out using configuration instead of code with input msgs/events allowing real-time changes.

* Any way to have a component that is able to get meta-data from another component. Eg version, docs, etc?

* Article elements with headings should be collapsible

* Move `const template` to static var for all components.

* Each component could have a getter to output their own TODO lists!

* https://github.com/microsoft/vscode-custom-data

* Extended input. Refs: [1](https://stackoverflow.com/questions/25495849/can-a-custom-element-extend-an-input-element), [2](https://elements-x.com/?path=/docs/getting-started--docs), [3](https://medium.com/@andresander/extending-html-inputs-in-a-framework-agnostic-way-with-web-components-9227532b6139), [4](https://blog.revillweb.com/extending-native-dom-elements-with-web-components-233350c8e86a).

* Ideas from [elements-x](https://elements-x.com/?path=/docs/getting-started--docs)
* [More gauges from hotnipi](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template)


## On-hold

These were started but, for some reason, usually time and/or complexity, I don't currently have the resources to continue or they have slipped down the priority list.

See the `not-complete` folder.

| Name            | Description                                                  |
| --------------- | ------------------------------------------------------------ |
| `chart-*`       | On-hold due to poor options for ECMA module chart libraries. Including Apex, ChartJS, Plotly, HiCharts. Various different chart outputs using different libraries. Chart.js, Uplot, EChart |
| `simple-tree`   | On-hold due to complexity |

## Wanted

| Name            | Description                                                  |
| --------------- | ------------------------------------------------------------ |
| `data-card`     | A data-driven card with headers, footers, etc. Also acts as a container for other HTML as part of a grid view. A more complex version of `simple-card` |
| `data-filter` | A filter component that allows you to filter data based on a set of criteria. This could be used with `data-list`, `data-table`, etc. Should work with data objects and directly with DOM tables and lists. |
| `data-table`    | Similar to `simple-table` but with more options such as nested tables and multiple headers/bodies. Probably also with CRUD controls. Search, col groups. |
| `date-time`     | Outputs a controllable date and/or time string with formatting. Possibly allow input as well. |
| `grid-view`     | A controllable grid layout.                                  |
| `multi-select`  | https://web.dev/building-a-multi-select-component/ |
| `on-off`        | A dedicated on/off button. [Possible ref](https://discourse.nodered.org/t/new-info-page-for-my-home-dashboard/97549/7?u=totallyinformation)    |
| `progress-bar`  | https://web.dev/building-a-loading-bar-component/ |
| `rag-list`      | A list with a RAG status icon for each entry |
| `simple-button` | A button that triggers a custom document event and sends to uibuilder (if available). Automatically includes attrib and prop data, id, name, etc. Includes basic formatting and a slot for text (which allows some HMTL formatting). |
| `simple-dialog` | Simple wrapper for a [dialog box](https://www.tutorialrepublic.com/codelab.php?topic=html5&file=dialog-tag) with options for modal, button list |
| `simple-gauge`  | Maybe using gauge.js? Or possibly [pure-knob](https://github.com/andrepxx/pure-knob) |
| `simple-input`  | A text input tag with a label. With option to be part of a form (button submission) or to give output on lost focus. May need multiple to deal with different input types |
| `simple-map`    | See Dave's WorldMap Dashboard node for inspiration! |
| `simple-pie`    | https://dev.to/dannyengelman/web-components-using-unknownhtmlelements-for-better-semantic-html-5d8c |
| `simple-router` | https://www.google.com/search?q=web+component+router&oq=web+component+router |
| `simple-slider` | |
| `simple-switch` | https://web.dev/building-a-switch-component/ |
| `simple-table`  | Takes a JSON or JavaScript object or array and displays the contents in a simple table format. |
| `switch-list`   | https://web.dev/building-a-switch-component/ |
| `table-chart`   | A simple, css driven chart component that uses a table as the data source. [ref](https://dev.to/madsstoumann/charts-in-css-1di1) |
| `toast-msg`     | Creates an OS-style toast message. |
| `visual-log`    | Creates a log element on-page that expands to a set number of lines then drops from the start |
| `status-list`   | List view with colour indication of status (e.g. on/off or RAG) |
| `check-list`    | List view with checkboxes (for multi input) or radio buttons (for single selection) |

## Possible future components

Note that some of these might not even be possible.

### `button-group` - A group of buttons

### `count-down` - A visual and/or audible countdown timer

* Visual and audible options.
* Length of time to count down. Number with options for hours, minutes, seconds. (Days?)
* Option to Auto-start after previous time-er ends.
* Visuals: Circular or linear countdown display.
* Audible: Beep, chime, etc.
* Optional pause, stop, reset buttons.
* Optional start time.

### `editable-list` - A list that can be edited in place

Updates the list data when the list is edited.

```html
<editable-list data="myData" type="unordered" prefix="date" checkbox></editable-list>
```

* `data` - The data that the list is based on
* `type` - The type of list, e.g. ordered, unordered
* `prefix` - The prefix to use for each item
* `checkbox` - Whether to include a checkbox for each item

If using uibuilder, updates will be returned to Node-RED.

### `for-next` - A looping component

```html
<for-next from="1" to="10" step="1">
  <p>Count: <for-var></for-var></p>
</for-next>
```

```html
<ol><for-next input="myvar" key="colId">
  <for-item><li><for-var col="colId"></for-var><li></for-item>
</for-next></ol>
```

### `image-meta` - access to image exif metadata

* [exiftool-vendored](https://github.com/photostructure/exiftool-vendored.js)
* [ref](https://jsdev.space/howto/javascript-exif-parser/)

### `layout-area` - Switch between a few core layouts such as blog & dash

#### `area-*` - Define an area for a layout, e.g. `area-main`, `area-head`, `area-foot`, `area-sidebar` - all included in the parent component's package.

### `light-switch` - on/off, level, colour. Location.

### `linear-gauge`

* horizontal/vertical layout option - using one of CSS grid or flex (whichever is best for the component)
* Segmented (led style, with LED's "lit" up to the current value) or smooth display (with pointer showing the current value)
* Max & Min limit options (defaulting to 0-100)
* Measure option: Default to %, text string used to indicate what the measure represents
* Optional label attribute + label position attribute - left/right/above/below - defaults to above
* Value attribute & property: defines the current value to be shown
* `segments` property: defines how many "ticks" - (max-min)/#ticks = the step value of each tick.
  * For LED style, show segment value beneath the display - where the color changes only. Have the segment value as a title attribute so it shows on hover.
  * For smooth style, 
  * Maybe allow override to facilitate non-linear gauges
* colour segments property: Allows setting each segment to a defined colour.
* Optional current value with positioning

Refs: [1](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955), Discourse vert indicators.

### `object-tree` - A collapsible tree view for displaying nested objects

* Allows for easy navigation and exploration of complex object structures
* Supports custom templates for rendering each node
* Optional search/filter functionality
* Optional editing capabilities
* Optional "simple" view - more compact representation of the object tree
* Copy object paths and values to clipboard
* [Ref](https://localhost:3001/test/json-editor.html)

### `range-image` - A range slider that uses an image such as a star rating

* [Reference](https://css-tricks.com/a-css-only-star-rating-component-and-more-part-1/), [2](https://css-tip.com/star-rating/)
* Can even be used to create a stepped volume control

### `simple-timeline`

### `simple-gallery`

* A simple image gallery with optional captions and/or descriptions
* Requires a list of urls pointing to images that will be dynamically loaded
* Possible extensions
  * Use [exiftool-vendored](https://github.com/photostructure/exiftool-vendored.js) library to load metadata
  * Add automated image rotation when the gallary overflows
  * Dialog version option (rather than just inline)

[ref](https://discourse.nodered.org/t/created-image-gallery-using-the-template-node-in-dashboard-2/96601)
[ref 2](https://jsdev.space/howto/javascript-exif-parser/)

### `smart-list` - 2-way data controllable list wrapper

* Wraps around lists to easily add different entry formats including numbering (nested), icons, checkboxes, prefixes (e.g. dates)
* Dynamic property to store contents - ideally 2-way
* Multiple ways to update content: DOM changes, custom event, proxied property. For uibuilder: auto-topic updates
* Optionally drag/drop to re-order with data property updated
* Optionally content editable - double-click on icon, prefix and text to edit
* Optional checkbox with data store
* UIBUILDER data enabled. Controllable updates back to Node-RED (e.g. when no longer visible or immediate)

```html
<smart-list data="myData" type="ordered" prefix="date" checkbox>
  <smart-item><span>1</span> <span>Item 1</span></smart-item>
</smart-list>
```

### `smart-report` - Like collapsible-headings but also data controllable

* Wraps around a collection of `<hx>` and `<p>`/`<div>`/`<img>` tags adding smarter formatting and control
* Optional collapsible headings
* Optional numbered headings (including nested numbers), format controllable
* Dynamic property to store contents - ideally 2-way
* Multiple ways to update content: DOM changes, custom event, proxied property. For uibuilder: auto-topic updates
* *Maybe - Optional drag/drop re-oder*
* *Maybe - double-click to content edit*

### `standard-footer` or extend `page-meta` - (c), date (range), author, version and other metadata

### `tab-view` - A tabbed view

* A simple tabbed view that allows you to switch between different tab "pages"
* Uses a `data` property to store the current tab
* Has a `tab-page` sub-component that wraps the content of each tab

### `todo-list` - A managable list of TODO items or shopping list

[ref](https://discourse.nodered.org/t/convert-dashboard-shopping-list-to-v2/96553)

### Other ideas

* Steppper - step through a form
* Status tracker - show the status/steps of a process
* Data map - map data to a visual representation
* Data tree - show a tree of data
* Guitar Chord - show a guitar chord diagram [ref](https://dev.to/madsstoumann/guitar-chords-in-css-3hk8)
* Scheduler - show/edit a schedule of events [ref](https://discourse.nodered.org/t/announce-scheduler-node-for-dashboard-2-0/95076)
* [Theme builder](https://kelpui.com/docs/tools/theme-builder/)
* Wrapper components:
  * [Heading Anchors](https://kelpui.com/docs/components/heading-anchors/)
  * [Table of Contents](https://kelpui.com/docs/components/toc/)
  * [Toggle Password](https://kelpui.com/docs/components/toggle-pw/)

## Probably not

These are ideas that I don't think are worth the effort, are better done other ways, or that I probably would not have the time to implement.

### `show-var` Version of uib-var - probably not worth the effort

Better to simply update the innerText of a selected element.

* Shows content from a JavaScript variable.
* Possibly allows dynamic overrides of attributes.
* Test with component version text.

### `key-value-list` (or possibly `property-list`?) - A list of key/value pairs using various views

`data-list` and `data-table` (AKA `smart-table`) components are probably better suited to this purpose.

Views include:
* Table
* List
* Checkbox list
* Cards