7 Awesome JavaScript Web App Tour Libraries

Top JavaScript tour libraries that will help youguide users through using your app.

Tour and guide libraries are there to help you guide your users through using your app. They do so by adding extra information to your UI, by providing tips or text (usually obtained from the server in JSON format), and by adding step-by-step instructions regarding the UI and/or functionalities of your web app. This post will cover my seven personal favorite libraries.

Build a Clear UI (Before Using Guide Libraries)

“A user interface is like a joke. If you have to explain it, it’s not that good”.

— Martin Leblanc

As you well know, nothing beats a self-explanatory UI. Instructions of any type should only be used after you’ve done your best in delivering a clear UI and a great UX. One key step in achieving that is building a design system .

Design systems or UI librariesare a way to reuse and standardize UI components (among other things). They’re a great way to maintain consistency in style and function, making your app more predictable and much easier to learn (less variance in UI means fewer things need to be learned).

Design systems are no longer a luxury enjoyed exclusively by large enterprises. Thanks to new cloud solutions like Bit.dev , design systems or UI libraries can grow and expand as you build your app. You can simply push individual UI components from any codebase/repository to a shared component hub where you and your team may discover, test, use and collaborate on them. Bit supports React, React with TS, Angular, VueJS and many others.

1. Intro.js

Intro.js is widely used due to its user-friendly solutions and has 19k GitHub stars. Its most important features are:

1. No dependencies: It does not require any other dependencies
2. Small and fast: The library’s smaller size makes the guiding process smooth and intuitive. The overall size of JavaScript files is 10KB, and CSS is 2.5KB.
3. User-Friendly: Navigation is user-friendly and provides various themes that can be selected as per your preference.
4. Browser Compatibility: Works on all major browsers like Google Chrome, Mozilla Firefox, Opera, Safari, and Internet Explorer.
5. Documentation: The documentation is excellent with samples and examples of each element to be introduced.

How to Install

To use Intro.js, you need to have npm and Node.js installed. Alternately, you can get Intro.js from:

• Its GitHub repository: use, git clone https://github.com/usablica/intro.js.git
• using bower:

• using npm:

• CDNs ( jsdeliver.com , cdnjs.com )

How to Use

Once you have installed intro.js, there are three simple steps to add it to your project:

1. Add the JS and CSS files (intro.js and introjs.css) into your project. If you require right to left language support, you can also add introjs-rtl.min.css.
2. Add the attributes data-intro and data-step to the relevant HTML elements. This will enable intro.js for the particular elements.
3. Call the following JavaScript function:

Use the following additional parameter to call Intro.js on a particular element or class.

Here is an example page where the user-friendly Intro.js is seen working.

See the Users

Intro.js is used by many organizations like SAP, Amazon, Nestle, and Kobo.

2. Shepherd

Shepherd has 8.1k GitHub stars , and its website demonstrates how it works. Here are its main features:

1. Accessibility: Provides keyboard navigation support, follows a11y compliance, and also uses JavaScript to enable focus trapping inside DOM elements.
2. Highly Customizable: Allows changing the look and feel without affecting performance.
3. Framework Ready: Readily ingrates into your project’s front-end framework.
4. Documentation: Documentation covers installations and customizations including theming, and styling for your projects.

How to Install

Shepherd is integrated with many major front-end frameworks and provides the following wrapper facilitates out of the box:

• Angular: angular-shepherd is an Angular wrapper, compatible with Angular 8+.
• Ember: ember-shepherd is an ember wrapper, tested with Ember.js >= v3.8, and is compatible with Ember CLI v12.3.
• React: react-shepherd is a React wrapper.
• Vue: vue-shepherd is a Vue wrapper.

You can directly install these wrappers using npm or yarn:

It can also be pulled directly via JsDeliver from the CDN:

How to Use

Once you have installed Shepherd, you can include the CSS and JS files as follows:

Here is an example of creating a Shepherd tour and adding steps with DOM elements attached to it.

See the Users

Shephard is used by companies like SimplePlanner and Brokermate to guide their users through the initial steps of their applications.

3. Bootstrap Tour

Twitter Bootstrap provides its own free tour implementation with Bootstrap Tour. It has 4,315 GitHub stars.

Bootstrap popovers are quick and easy to build. This is a jQuery-based plugin for bootstrap and uses the power of DOM and JavaScript configuration to build the tour. It’s as simple as including the JS and CSS files and provides in-depth documentation.

How to Install

You can simply use the CSS and JS files of bootstrap:

Or use standalone CSS or JavaScript files:

You can even pull the JS and CSS files from CDN.

https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.12.0/js/bootstrap-tour-standalone.js
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.12.0/js/bootstrap-tour-standalone.min.js
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.12.0/js/bootstrap-tour.js
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.12.0/js/bootstrap-tour.min.js
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.12.0/css/bootstrap-tour-standalone.css
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.12.0/css/bootstrap-tour-standalone.min.css
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.12.0/css/bootstrap-tour.css
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.12.0/css/bootstrap-tour.min.css

How to Use

After the initial setup, you can create an instance of the tour and add steps with the element details as follows:

4. Chardin.js

Inspired by Gmail’s new composer tour, Chardin.js is a simple overlay of instructions on existing elements. It uses a JQuery plugin to display instructions. The GitHub page contains the instructions and documentation and has 4.9k GitHub stars.

How to Install

You can fork the GitHub repo or download the required CSS and JS files chardinjs.css and chardinjs.min.js and add them to the HTML page.

How to Use

After setting up, you can add instructions to the document. Below is an example of adding an instruction to an image element. The data-intro sets the text to be displayed and data-positions decide the position of the text.

To run Chardin in the sequential mode you need to use different instructions like data-chardin-sequenced=”true”, data-chardin-auto=”true” and data-chardin-delay=”100” to display the instructions with an automatic movement through elements.

Once the elements are ready with the instructions, you can initialize the library through a button click or make it run automatically. The library can also be limited to a particular container.

Chardin.js allows you to refresh the overlay and also provides construction options to specify URL containing text as JSON objects that can be displayed as instructions.

5. PageGuide

PageGuide is a smart guide for interactive, dynamic, and single-page apps based on jQuery and CSS3.

How to Install

You can install PageGuide in any one of the following four ways:

• Download the latest release from GitHub
• Clone the repo: git clone https://github.com/tracelytics/pageguide.git
• Install with Bower

Install using npm

The installation is loaded with examples and can be run using Grunt at http://localhost:3000/example/ .

For the initial setup, add pageguide.js and the CSS file as follows:

How to Use

Add the following code to your HTML file to initialize PageGuide:

Specify the selector in <ul>, this will be matched by PageGuide to display the text. Below is an example of adding pageguide.js to the bottom of the page.

PageGuide is used to display static messages on the page, resulting in it being less cluttered.

6. Hopscotch

Hopscotch was built by Gordon Koo and Hans van de Bruggen as an open-source tool during LinkedIn’s Incubator program . Its main purpose was to solve problems of usability, intuitiveness, and performance.

With 4.3k GitHub stars, it is only 8kb in its minified and gzipped state. Though it does not require dependencies, it may use jQuery if available on the page. Hopscotch offers:

• Event callbacks: supports callbacks for onStart, onNext, and onClose events.
• Multipage resistance: Uses HTML5 session storage to persist the state of the tour across pages.
• i18n: Supports internationalization.
• Lightweight callouts: Manages callouts with a convenient method to create them.
• Browser compatibility: It is compatible with all browsers.
• Customizable: It allows CSS tweaks, bubble markup, and page interactivity.

How to Install

Use Grunt.js to build Hopscotch. This will run the test suite with new artifacts. Then include the two files hopscotch.js and hopscotch.css into the HTML page.

How to Use

Once the initial setup is complete, you can initialize the tour using JSON.

Hopscotch can be tested using the Jasmine testing framework and allows continuous integration with Travis CI.

7. Tourist.js

Tourist.js is a simple library best suited for a single page application than a multipage website. It can control the interface at each step. Using Tourist, you can create a guide for the steps that require opening a window or menu. A series of steps can be specified with instructions for particular elements.

Despite the absence of a website, the GitHub page with 12k stars consists of extensive documentation.

How to Install

You can install Tourist.js using the following bower command:

Tourist requires jQuery and Backbone, and has the ability to use Bootstrap 3 popovers (default) or QTip2 tips along with Bootstrap 3 CSS.

The “tourist.js” JavaScript file and an optional CSS file can be used to customize styles.

How to Use

After the initial setup, you can create the steps and add them to the tour instance as follows:

It also allows you to have your custom implementation for tips using Tourist.tip.

Conclusion

Implementing JavaScript tours and guides is an easy way to introduce users to an application. Most of these tools use CSS and JavaScript files with simple initialization. These tools are used by many top-notch companies. How your tours and guides look, and function will depend on the library you select. The right tour can make your application a lot more intuitive and attractive to users.