# NodeRed 2.x Guided Tour Lib or Tool was used to showcase new features?

**URL:** <https://discourse.nodered.org/t/nodered-2-x-guided-tour-lib-or-tool-was-used-to-showcase-new-features/54708>\
**Category:** General\
**Created:** [4 December 2021 12:47 UTC](https://discourse.nodered.org/t/nodered-2-x-guided-tour-lib-or-tool-was-used-to-showcase-new-features/54708 "2021-12-04T12:47:34Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![karlyboy](https://avatars.discourse-cdn.com/v4/letter/k/77aa72/32.png) [@karlyboy](https://discourse.nodered.org/u/karlyboy)\
**Post date:** [4 December 2021 12:47 UTC](https://discourse.nodered.org/t/nodered-2-x-guided-tour-lib-or-tool-was-used-to-showcase-new-features/54708/1 "2021-12-04T12:47:34Z")

</div>

Hi,

Anyone know what tool or library was used on the intro of Note Red 2, that tags elements, and provides a spot light on them with information on what is new - sort of guided tour. I really liked this bit of polish on the update and was thinking of using something like this on another project I have. Anyone know what lib or tool was used to make it?

Kind regards all

K

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [4 December 2021 12:58 UTC](https://discourse.nodered.org/t/nodered-2-x-guided-tour-lib-or-tool-was-used-to-showcase-new-features/54708/2 "2021-12-04T12:58:59Z")

</div>

Hi @karlyboy

It's an entirely custom component I wrote for Node-RED.

There are quite a few libraries available that provide this type of thing. [https://link.medium.com/gA7ijL3iIlb](https://link.medium.com/gA7ijL3iIlb)

But I ultimately decided we needed something a bit more Node-RED aware so it could integrate better with the editor. It could also reuse some of the existing UI components we had in the editor to provide a more consistent ux.

> <https://github.com/node-red/node-red/blob/master/packages/node_modules/@node-red/editor-client/src/js/ui/tour/tourGuide.js>

---

<div class="post-metadata">

**Author:** ![karlyboy](https://avatars.discourse-cdn.com/v4/letter/k/77aa72/32.png) [@karlyboy](https://discourse.nodered.org/u/karlyboy)\
**Post date:** [4 December 2021 21:29 UTC](https://discourse.nodered.org/t/nodered-2-x-guided-tour-lib-or-tool-was-used-to-showcase-new-features/54708/3 "2021-12-04T21:29:52Z")

</div>

thanks this is really cool stuff, and well implemented! thanks Nick

---

<div class="post-metadata">

**Author:** ![gazoscalvertos](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gazoscalvertos/32/52838_2.png) [@gazoscalvertos](https://discourse.nodered.org/u/gazoscalvertos)\
**Post date:** [18 December 2021 22:55 UTC](https://discourse.nodered.org/t/nodered-2-x-guided-tour-lib-or-tool-was-used-to-showcase-new-features/54708/4 "2021-12-18T22:55:45Z")

</div>

This is a brilliant feature.

I understand we can trigger this using RED.tourGuide.run("./tours/first-flow.js") as the first flow example. Is there any way to trigger this for first installs of custom components? I'd love to write a tour for one of mine.

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [18 December 2021 23:09 UTC](https://discourse.nodered.org/t/nodered-2-x-guided-tour-lib-or-tool-was-used-to-showcase-new-features/54708/5 "2021-12-18T23:09:14Z")

</div>

The only tour we've fully published is the welcome tour.

The first-flow tour slipped in by mistake, but isn't exposed anywhere yet.

We don't yet have a documented pattern for how contrib nodes could create their own tours, or how they would be exposed.

I don't think we would want them to trigger automatically the first time they are loaded in the editor - if a user installed multiple nodes with tours, they would all trigger at the same time when they next load the editor and it would get messy.

I was thinking we'd have a list of available tours in the Help sidebar... but there's more work to be done to make that happen.

---

<div class="post-metadata">

**Author:** ![gazoscalvertos](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gazoscalvertos/32/52838_2.png) [@gazoscalvertos](https://discourse.nodered.org/u/gazoscalvertos)\
**Post date:** [18 December 2021 23:21 UTC](https://discourse.nodered.org/t/nodered-2-x-guided-tour-lib-or-tool-was-used-to-showcase-new-features/54708/6 "2021-12-18T23:21:01Z")

</div>

That makes sense and I'd love to see that added to the help sidebar. If you need anyone to help test then just hit me up.

Thanks Nick!

---

<div class="post-metadata">

**Author:** ![gazoscalvertos](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gazoscalvertos/32/52838_2.png) [@gazoscalvertos](https://discourse.nodered.org/u/gazoscalvertos)\
**Post date:** [20 December 2021 21:29 UTC](https://discourse.nodered.org/t/nodered-2-x-guided-tour-lib-or-tool-was-used-to-showcase-new-features/54708/7 "2021-12-20T21:29:53Z")

</div>

For anyone interested, I've managed to work around this which might offer a better UX in certain circumstances. I've added a button to each custom node "Tour Guide" which triggers my tour RED.tourGuide.run("/resources/node-red-contrib-xrpl/tours/welcome.js"). The tour file is stored under a resources/tours directory at the root of the project folder. This could obviously be used to provided an interactive tutorial for each custom node which I'm considering but for now an overall tour will suffice.

---

<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:** [18 February 2022 21:29 UTC](https://discourse.nodered.org/t/nodered-2-x-guided-tour-lib-or-tool-was-used-to-showcase-new-features/54708/8 "2022-02-18T21:29:55Z")

</div>

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