# Example minimal custom node playground

**URL:** <https://discourse.nodered.org/t/example-minimal-custom-node-playground/82503>\
**Category:** Developing Nodes\
**Created:** [31 October 2023 21:37 UTC](https://discourse.nodered.org/t/example-minimal-custom-node-playground/82503 "2023-10-31T21:37:20Z")\
**Posts on this page:** 3\
**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:** [31 October 2023 21:37 UTC](https://discourse.nodered.org/t/example-minimal-custom-node-playground/82503/1 "2023-10-31T21:37:20Z")

</div>

Hi all,

Been meaning to create a new playground template for a while for my own use. Finally got round to it.

Maybe there are others who will find it helpful.

> **[GitHub - TotallyInformation/Node-RED-Testbed: A blank canvas to test out...](https://github.com/TotallyInformation/Node-RED-Testbed)**
>
> A blank canvas to test out ideas for Node-RED custom nodes - GitHub - TotallyInformation/Node-RED-Testbed: A blank canvas to test out ideas for Node-RED custom nodes

No real documentation in it as yet I'm afraid. There is 1 configured node called `ti-dummy` and 1 unconfigured node called `ti-template`.

While it is possible that I might occasionally push something that changes `ti-dummy`, `ti-template` will remain my empty template for new nodes.

* * *

Please note that this example is serious overkill for simple custom nodes, it embodies my workflow for my nodes which includes a few things you might find complex until you've used them and realise the value:

- The node's HTML file is not edited directly, see the `src` folder where you will find 5 files for each node.

- Each node's runtime will also look a little different. That is because I've deconstructed the parts that make up the runtime component.

- There is also a `typedefs.js` file where you will find definitions for your nodes and some enhanced definitions for Node-RED components as well. These work along with the JSDoc definitions, particularly in the runtime code.

- A full set of eslint dev dependencies are present along with the minimal grunt dev dependencies you may want for automation. Running `npm install` will get you up and running with a decent environment and this all works well with VScode.

And now I've gone to the trouble of writing all of this, I'll put it into the readme as well. 🙂

Hope someone else finds this 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:** [4 November 2023 15:55 UTC](https://discourse.nodered.org/t/example-minimal-custom-node-playground/82503/2 "2023-11-04T15:55:16Z")

</div>

Just pushed a new update to GitHub.

The common editor css and js code is improved and further standardised (after implementing the same approach in uibuilder nodes). Worth noting as well, that a package of multiple nodes can really get extra benefits via this approach since it limits running the common code only once. This is already driving some further improvements in UIBUILDER as it has sparked some ideas about more Editor code that can be made common and only done once instead of for each instance of each node.

As an extension to the same approach, each node's HTML file no longer has a manual script section (which requires a rebuild and node-red restart for each change). Instead, the node's JavaScript now exists in another resource js file and is loaded in the html file. This means that the rebuilds are simpler and you don't need to restart node-red to pick up a change for the editor, simply reload the Editor page.

Expect some experiments in the future where I play with some more advanced features for node edit panels such as the combo box I was looking for recently.

---

<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 January 2024 15:56 UTC](https://discourse.nodered.org/t/example-minimal-custom-node-playground/82503/3 "2024-01-03T15:56:00Z")

</div>

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