# Ongoing updates to @totallyinformation/web-components - handy widgets for all

**URL:** https://discourse.nodered.org/t/ongoing-updates-to-totallyinformation-web-components-handy-widgets-for-all/91186
**Category:** Share Your Projects
**Created:** [22 September 2024 19:55 UTC](https://discourse.nodered.org/t/ongoing-updates-to-totallyinformation-web-components-handy-widgets-for-all/91186 "2024-09-22T19:55:22Z")
**Posts on this page:** 16
**Page:** 1

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [22 September 2024 19:55 UTC](https://discourse.nodered.org/t/ongoing-updates-to-totallyinformation-web-components-handy-widgets-for-all/91186/1 "2024-09-22T19:55:22Z")

</div>

UPDATE: 2024-10-01 - Yet more updates.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/e/1ec4e75f06fefa540090cb30074ea138694a4c77.png)

UPDATE: 2024-10-01 - More updates and now the components have their own website which demonstrates and tests them. [https://wc.totallyinformation.net](https://wc.totallyinformation.net)

Hi all, just letting you know what I've been working on this weekend.

I've had a repo on GitHub for ages called `web-components`.

> **[GitHub - TotallyInformation/web-components: A repository of simple W3C Web Components. These...](https://github.com/TotallyInformation/web-components)**
>
> A repository of simple W3C Web Components. These have specific capabilities for use with node-red-contrib-uibuilder but will work independently as well.

I've now started re-engineering them to make them a bit more production ready.

They work anywhere you can use W3C standard Web Components since that is what they are. 😀 Each one is stand-alone so requires just a single load. They self-register on load so are immediately usable. You should be able to use these not only with UIBUILDER but also with Dashboard's 1 & 2 and http-in/http-response.

The documentation is a bit hit-and-miss I'm afraid but will get better.

I'd consider only a couple of the components to be ready to use: `visible-console` and `button-send`. The rest should be considered "alpha" quality and all need to be brought into the standards I've just created (namely using a base class).

Example output:

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

Though they don't _require_ UIBUILDER, they are generally enhanced by it.

For example, the button-send tag will immediately send data back to Node-RED when clicked. Without uibuilder, you would need to add an event listener. Either way, you get an enhanced set of data automatically.

The `visible-console` isn't currently enhanced by uibuilder. It enhances your browser's `console` logging to make it visible on-page, useful for debugging pages on a mobile device.

Next to be moved to production status will most likely be:

- `html-include` - which lets you easily integrate external HTML fragments into your page.
- `syntax-highlight` - which gives you a formatted view of JSON data.

There are dozens of others in preparation though including a number that use standard chart libraries.

You can make the package immediately usable in UIBUILDER (and elsewhere in Node-RED) by using uibuilder's library manager and adding `totallyinformation/webcomponents` which will load the latest GitHub version and make it available. See [the docs](https://totallyinformation.github.io/web-components/#/) for quick examples of use both with and without UIBUILDER.

As always, let me know what you'd find useful and any issues.

---

<div class="post-metadata">

### Author: ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)
#### Post date: [23 September 2024 06:02 UTC](https://discourse.nodered.org/t/ongoing-updates-to-totallyinformation-web-components-handy-widgets-for-all/91186/2 "2024-09-23T06:02:34Z")

</div>

I was looking at the repo, note that a `datalist` element already exists in html, although the webcomponent is called `data-list`, it might be confusing ?

In the visible console you have a `renderCollapsible` function - this behaviour can be done using standard html, look at the [details + summary elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) (heavily under-used elements, super useful)

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [23 September 2024 08:13 UTC](https://discourse.nodered.org/t/ongoing-updates-to-totallyinformation-web-components-handy-widgets-for-all/91186/3 "2024-09-23T08:13:20Z")

</div>

> [@bakman2](#):
>
> I was looking at the repo, note that a `datalist` element already exists in html, although the webcomponent is called `data-list`, it might be confusing ?

Thanks, you may be right there. The idea for that component was the ability to pass a simple array or object and have it render as a list. UIBUILDER has a no-code element that does the same thing and it is really useful, this was to be a component equivalent of that. Other names always welcome. 🙂

> [@bakman2](#):
>
> In the visible console you have a `renderCollapsible` function - this behaviour can be done using standard html, look at the [details + summary elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) (heavily under-used elements, super useful)

I'm aware of details/summary but it wasn't quite right for this as the rendering of an arbitrarily complex JavaScript object is really quite a hard problem. I'm sure it could be done that way but the code I came up with didn't quite lend itself. Of course, I "borrowed" much of the code from elsewhere anyway.

One day I may get around to re-writing it but for now, it does the job well enough.

I also know that I need to improve other aspects of that code as much of it is still pixel based sizing which I very much dislike. All of my own code is `em`, `rem`, `%`, etc or grid/flexbox based.

Plenty of other things to add to that one as well such as timestamps. And some loop traps to prevent endless loops.

But as it just about works for its stated purpose and I've already found it useful, it went into the usable pile. 🙂

* * *

Many thanks for your feedback. I've far more ideas than I'll ever have time to properly implement but I always welcome more.

---

<div class="post-metadata">

### Author: ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)
#### Post date: [23 September 2024 12:09 UTC](https://discourse.nodered.org/t/ongoing-updates-to-totallyinformation-web-components-handy-widgets-for-all/91186/4 "2024-09-23T12:09:23Z")

</div>

> [@TotallyInformation](#):
>
> but I always welcome more.

state-trail 🙂

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [23 September 2024 12:50 UTC](https://discourse.nodered.org/t/ongoing-updates-to-totallyinformation-web-components-handy-widgets-for-all/91186/5 "2024-09-23T12:50:57Z")

</div>

Yup, started on it. 🙂 Though it is called `state-timeline` which is a little more descriptive and in line with the Grafana widget of the same style.

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [23 September 2024 16:37 UTC](https://discourse.nodered.org/t/ongoing-updates-to-totallyinformation-web-components-handy-widgets-for-all/91186/6 "2024-09-23T16:37:38Z")

</div>

Ah, just sidetracked myself! Had a sudden brainwave regarding something I've long looked for a solution.

How to make a collection of text and headings (e.g. a document or report) be collapsible around the headings without having to change the HTML (which might be produced elsewhere - for example converted from Markdown).

And with a little help from my coding partner (AKA ChatGPT!), a new component `<collapsible-headings>` is born! Wrap it around some HTML that contains `<h1>` to `<h4>` tags and those become clickable to collapse/expand according to the hierarchy of headings.

Assuming I can get it to work, that should be very cool indeed. Great for wordy pages such as documentation and reports.

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [24 September 2024 20:55 UTC](https://discourse.nodered.org/t/ongoing-updates-to-totallyinformation-web-components-handy-widgets-for-all/91186/7 "2024-09-24T20:55:42Z")

</div>

Some more updates.

The basic version of the `collapsible-headings` component is there and does the job. Not perfect for sure but already amazingly useful if you need to show a lot of text divided up with headings (AKA a "document" or "report").

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [29 September 2024 17:18 UTC](https://discourse.nodered.org/t/ongoing-updates-to-totallyinformation-web-components-handy-widgets-for-all/91186/8 "2024-09-29T17:18:07Z")

</div>

Another big update just pushed. Documentation not quite caught up.

Moving all components to extend from a base component to improve standardisation.

The following components have versions that, while not as "complete" as I'd like, are ready for basic use:

- button-send - an active button
- call-out - the latest addition, produces nice callout boxes of different types with title overrides.
- collapsible-headings - takes a report/article and makes the headings collapsible
- html-include - show html/json from an external resource
- syntax-highlight - show JSON data in a formatted/highlighted way
- visible-console - mirror console output to the page

All the components are dependency-free so you only have a single file to load.

I'm also building up a library of test/demo web pages (in the tests folder). There is a simple node.js web server that you can run to demo things.

Documentation is growing and vs-code intelligence is provided for ease of use.

Lots more to come in the ever-growing library:

- show-var - displays JavaScript data on-page - e.g. I'll probably use this in the demo pages to show the component versions.
- light-switch - with on/off/level/colour and location.
- layout-area - pre-defined page layouts along with a set of `area-*` components that will make it easy to put information in the right logical place.
- smart-list - nestable lists with optional icons, nested numbering, ability to create from a nested JavaScript array. Eventually, drag/drop reordering, double-click to edit various parts. Browser save and output updates to node-red ...
- smart-report - an enhanced version of collapsible-headings with similar features to the smart-list but designed specifically for report/article style text with headings.

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [29 September 2024 17:19 UTC](https://discourse.nodered.org/t/ongoing-updates-to-totallyinformation-web-components-handy-widgets-for-all/91186/9 "2024-09-29T17:19:40Z")

</div>

Callouts:

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

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [30 September 2024 08:41 UTC](https://discourse.nodered.org/t/ongoing-updates-to-totallyinformation-web-components-handy-widgets-for-all/91186/10 "2024-09-30T08:41:15Z")

</div>

And the HTML for some callouts to show how easy they are:

```html
    <call-out type="note">
        This is a <code>note</code> type.
    </call-out>

    <call-out type="note" title="We can add our own title">
        <p>
            If you specify <i>any</i> <code>type</code> attribute and a <code>title</code> attribute, 
            the title replaces the heading.
        </p>
        <p>
            This example also shows multiple paragraphs.
        </p>
    </call-out>

    <call-out type="tip">
        This is a <code>tip</code> type.
    </call-out>

    <call-out type="warning">
        This is a <code>warning</code> type.
    </call-out>

    <call-out type="important">
        This is a <code>important</code> type.
    </call-out>

    <call-out type="caution">
        This is a <code>caution</code> type.
    </call-out>

    <call-out>
        This does not have a type. It has no heading.
    </call-out>

    <call-out title="This has a title.">
        This does not have a type. It gets a heading if you specify a title attribute.
    </call-out>

    <call-out type>
        This has a blank type. It has no heading.
    </call-out>

    <call-out type title="This has a title." icon="😈">
        This has a blank type. It gets a heading if you specify a title attribute.
        <p>
            We can set a custom heading icon as well (only text allowed for now, use emoji's).
        </p>
    </call-out>

```

Also, for fun, tried this in a ui-template on D2:

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

Yup, works perfectly. 🙂

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [1 October 2024 20:28 UTC](https://discourse.nodered.org/t/ongoing-updates-to-totallyinformation-web-components-handy-widgets-for-all/91186/11 "2024-10-01T20:28:44Z")

</div>

Still more updates.

And this time - the library now has its own website!

[https://wc.totallyinformation.net](https://wc.totallyinformation.net)

The documentation (such as it is) and the demo/test pages are all here.

---

<div class="post-metadata">

### Author: ![mudwalker](https://avatars.discourse-cdn.com/v4/letter/m/47e85d/32.png) [@mudwalker](https://discourse.nodered.org/u/mudwalker)
#### Post date: [2 October 2024 11:42 UTC](https://discourse.nodered.org/t/ongoing-updates-to-totallyinformation-web-components-handy-widgets-for-all/91186/12 "2024-10-02T11:42:33Z")

</div>

Looks good, especially with the examples.

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [2 October 2024 15:47 UTC](https://discourse.nodered.org/t/ongoing-updates-to-totallyinformation-web-components-handy-widgets-for-all/91186/13 "2024-10-02T15:47:48Z")

</div>

Thanks, I had a sudden brainwave and had been thinking about moving my blog (which I never get to update because it is a bit of a pain) to Cloudflare pages but then realised that I could use it to host both the docs (which use Docksify) and the demo pages. Even better, Cloudflare make a test/dev webserver that you can run with a simple `npx` command and that mirrors the features of Cloudflare Pages AND Cloudflare Workers - nice!

Cloudflare Pages gives me a lot more flexibility than GitHub pages AND not only have unlimited pages access (and generous worker access) but also link to Cloudflare DNS and other Cloudflare security features including Cloudflare Access if you want to protect access to something with up to 50 users for free.

Darn it, I need to get sponsored by Cloudflare! 😀

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [6 October 2024 17:08 UTC](https://discourse.nodered.org/t/ongoing-updates-to-totallyinformation-web-components-handy-widgets-for-all/91186/14 "2024-10-06T17:08:48Z")

</div>

More updates today including the promotion of the `<labelled-value>` component.

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

And some further documentation updates. All the demos and documentation get automatically updated on [https://wc.totallyinformation.net](https://wc.totallyinformation.net).

---

<div class="post-metadata">

### Author: ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)
#### Post date: [6 October 2024 20:56 UTC](https://discourse.nodered.org/t/ongoing-updates-to-totallyinformation-web-components-handy-widgets-for-all/91186/15 "2024-10-06T20:56:21Z")

</div>

Should that link be [https://wc.totallyinformation.net](https://wc.totallyinformation.net).  
The colour of the menu links is a bit iffy for a dark page 😄

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [6 October 2024 22:01 UTC](https://discourse.nodered.org/t/ongoing-updates-to-totallyinformation-web-components-handy-widgets-for-all/91186/16 "2024-10-06T22:01:01Z")

</div>

> [@Buckskin](#):
>
> Should that link be

Oops! Thanks. Corrected.

For info, the next component being worked on is `smart-table`. This creates an HTML table (usually a painfully laborious job) from a data array/object input. With named rows/columns, cell identifiers, column overrides, ....

> [@Buckskin](#):
>
> The colour of the menu links is a bit iffy for a dark page

Yes, I noticed that - suggestions would be welcome!