intro.js vs shepherd.js vs driver.js vs vue-tour
JavaScript Tour Libraries Comparison
1 Year
intro.jsshepherd.jsdriver.jsvue-tour
What's JavaScript Tour Libraries?

JavaScript tour libraries are tools designed to guide users through web applications by providing interactive tutorials or onboarding experiences. These libraries help developers create step-by-step walkthroughs that highlight features, explain functionality, and improve user engagement. They are particularly useful for complex applications where users may need assistance understanding how to navigate or utilize various features effectively. By implementing these libraries, developers can enhance user experience, reduce confusion, and increase overall satisfaction with the application.

Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
intro.js153,62423,106647 kB722 years agoAGPL-3.0
shepherd.js125,50713,1932.3 MB583 months agoAGPL-3.0
driver.js123,20324,17782.5 kB9415 days agoMIT
vue-tour16,4502,432-744 years agoMIT
Feature Comparison: intro.js vs shepherd.js vs driver.js vs vue-tour

Customization

  • intro.js:

    Intro.js offers basic customization options, such as changing tooltip text and styles, but it is more limited compared to others. It’s designed for quick setups, making it less flexible for complex customization needs but easy to implement for straightforward tours.

  • shepherd.js:

    Shepherd.js excels in customization, providing developers with the ability to create highly tailored tours. You can define custom steps, styles, and even add interactive elements to the tour, allowing for a unique user experience that fits your application's branding and functionality.

  • driver.js:

    Driver.js allows for extensive customization of the tour experience, including the ability to specify the appearance of highlighted elements, customize tooltips, and control the flow of the tour programmatically. Developers can easily modify styles and behaviors to fit their application's design.

  • vue-tour:

    Vue-tour provides customization options that are specifically designed for Vue.js applications. It allows developers to leverage Vue's reactive properties to create dynamic tours that can change based on user interactions, making it highly adaptable to different scenarios.

Ease of Use

  • intro.js:

    Intro.js is known for its simplicity and ease of use. It requires minimal setup and can be implemented quickly, making it an excellent choice for developers who need to create tours without a steep learning curve.

  • shepherd.js:

    Shepherd.js has a moderate learning curve due to its extensive features and customization options. While it provides powerful capabilities, developers may need to invest time in understanding its API to fully leverage its potential.

  • driver.js:

    Driver.js is relatively easy to use, with a straightforward API that allows developers to quickly set up tours. However, it may require some additional coding for more complex scenarios, which could be a barrier for less experienced developers.

  • vue-tour:

    Vue-tour is designed to be easy to use within Vue.js applications. Developers familiar with Vue will find it intuitive, as it integrates seamlessly with Vue's component system, allowing for quick implementation of tours.

Integration

  • intro.js:

    Intro.js is also framework-agnostic and can be easily integrated into any web application. It works well with various front-end technologies, making it a flexible choice for developers looking for a simple solution.

  • shepherd.js:

    Shepherd.js is designed to be integrated into any JavaScript application, but it shines when used with frameworks like React, Angular, or Vue. It provides specific integrations and examples for these frameworks, making it easier to implement in complex applications.

  • driver.js:

    Driver.js can be integrated into any web application regardless of the framework being used. Its framework-agnostic nature makes it versatile for various projects, but it may require additional effort to integrate with specific frameworks.

  • vue-tour:

    Vue-tour is specifically built for Vue.js applications, making it the best choice for projects that utilize Vue. Its tight integration with Vue's ecosystem allows for a more seamless experience when creating tours.

Community and Support

  • intro.js:

    Intro.js has a larger community and a wealth of resources available, including tutorials and examples. This makes it easier for developers to find help and share experiences when implementing tours.

  • shepherd.js:

    Shepherd.js has a growing community and provides good documentation, along with examples and support through GitHub. Its extensibility has attracted a dedicated user base, which can be beneficial for troubleshooting and enhancements.

  • driver.js:

    Driver.js has a smaller community compared to some other libraries, which may result in limited resources and support. However, its documentation is clear and provides enough guidance for developers to get started.

  • vue-tour:

    Vue-tour has a smaller community, but it is well-documented for Vue developers. Support can be found through Vue-specific forums and resources, making it easier for Vue users to get assistance.

Advanced Features

  • intro.js:

    Intro.js offers basic features for creating tours but lacks advanced capabilities such as branching logic or complex interactions. It is best suited for simple onboarding experiences.

  • shepherd.js:

    Shepherd.js stands out with advanced features like multi-step navigation, the ability to create custom actions, and event handling. This makes it suitable for applications that require detailed user guidance and interactivity during the tour.

  • driver.js:

    Driver.js focuses on providing a simple yet effective way to highlight elements and guide users. It lacks some advanced features like multi-step navigation but excels in straightforward implementations.

  • vue-tour:

    Vue-tour supports advanced features that leverage Vue's reactivity, allowing for dynamic tours that can change based on user interactions. It is particularly useful for applications that require a more interactive onboarding experience.

How to Choose: intro.js vs shepherd.js vs driver.js vs vue-tour
  • intro.js:

    Select intro.js if you want a straightforward, easy-to-implement solution that provides a clean and minimalistic user interface for creating tours. It’s great for quick onboarding experiences and offers built-in functionality for tooltips and steps.

  • shepherd.js:

    Opt for shepherd.js if you require a highly customizable and extensible solution that supports complex tours with advanced features like multi-step navigation, custom styling, and event handling. It's suitable for applications that need detailed guidance and flexibility in tour design.

  • driver.js:

    Choose driver.js if you need a lightweight, flexible solution that allows for precise control over the highlighting of elements and the flow of the tour. It's ideal for simple use cases where you want to guide users through specific interactions without a lot of overhead.

  • vue-tour:

    Use vue-tour if you are developing a Vue.js application and want a seamless integration with Vue's reactivity system. It provides a straightforward way to create tours that are tightly coupled with Vue components, making it ideal for Vue-specific projects.

README for intro.js

Intro.js

Build Status npm

User Onboarding and Product Walkthrough Library

Where to get

You can obtain your local copy of Intro.js from:

1) This GitHub repository, using git clone https://github.com/usablica/intro.js.git

2) Using yarn yarn add intro.js

3) Using npm npm install intro.js --save

4) Download it from CDN (1, 2)

How to use

Intro.js can be added to your site in three simple steps:

1) Include intro.js and introjs.css (or the minified version for production) in your page. Use introjs-rtl.min.css for Right-to-Left language support.

CDN hosted files are available at jsDelivr (click Show More) & cdnjs.

2) Add data-intro and data-step to your HTML elements. To add hints you should use data-hint attribute.

For example:

<a href='http://google.com/' data-intro='Hello step one!'></a>

See all attributes here.

3) Call this JavaScript function:

introJs().start();

Optionally, pass one parameter to introJs function to limit the presentation section.

For example introJs(".introduction-farm").start(); runs the introduction only for elements with class='introduction-farm'.

Documentation

Please visit Documentation.

Using with:

Intro.js has many wrappers for different purposes. Please visit Documentation for more info.

Build

First you should install nodejs and npm, then first run this command: npm install to install all dependencies.

Now you can run this command to minify all static resources:

npm run build

Contributors ✨


Afshin Mehrabani

💻 📖

bozdoz

💻 📖

Support/Discussion

License

Commercial license

If you want to use Intro.js for a commercial application, theme or plugin the commercial license is the appropriate license. With this option, your source code is kept proprietary. Purchase a commercial license at introjs.com

Open-source license

GNU AGPLv3