driver.js vs intro.js vs shepherd.js vs vue-tour
JavaScript Tour Libraries Comparison
1 Year
driver.jsintro.jsshepherd.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
driver.js140,21324,43082.5 kB1022 months agoMIT
intro.js138,03323,227874 kB804 days agoAGPL-3.0
shepherd.js135,57713,2372.3 MB585 months agoAGPL-3.0
vue-tour15,1282,431-744 years agoMIT
Feature Comparison: driver.js vs intro.js vs shepherd.js vs vue-tour

Customization

  • 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.

  • 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.

  • 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

  • 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.

  • 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.

  • 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

  • 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.

  • 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.

  • 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

  • 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.

  • 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.

  • 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

  • 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.

  • 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.

  • 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: driver.js vs intro.js vs shepherd.js vs vue-tour
  • 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.

  • 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.

  • 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 driver.js


Driver.js

jsdelivr hits downloads

Powerful, highly customizable vanilla JavaScript engine to drive the user's focus across the page
No external dependencies, light-weight, supports all major browsers and highly customizable


  • Simple: is simple to use and has no external dependency at all
  • Light-weight: is just 5kb gzipped as compared to other libraries which are +12kb gzipped
  • Highly customizable: has a powerful API and can be used however you want
  • Highlight anything: highlight any (literally any) element on page
  • Feature introductions: create powerful feature introductions for your web applications
  • Focus shifters: add focus shifters for users
  • User friendly: Everything is controllable by keyboard
  • TypeScript: Written in TypeScript
  • Consistent behavior: usable across all browsers
  • MIT Licensed: free for personal and commercial use

Documentation

For demos and documentation, visit driverjs.com


So, yet another tour library?

No, it's more than a tour library. Tours are just one of the many use-cases. Driver.js can be used wherever you need some sort of overlay for the page; some common usecases could be: highlighting a page component when user is interacting with some component to keep them focused, providing contextual help e.g. popover with dimmed background when user is filling a form, using it as a focus shifter to bring user's attention to some component on page, using it to simulate those "Turn off the Lights" widgets that you might have seen on video players online, usage as a simple modal, and of-course product tours etc.

Driver.js is written in Vanilla TypeScript, has zero dependencies and is highly customizable. It has several options allowing you to change how it behaves and also provides you the hooks to manipulate the elements as they are highlighted, about to be highlighted, or deselected.

Also, comparing the size of Driver.js with other libraries, it's the most light-weight, it is just ~5kb gzipped while others are 12kb+.


Contributions

Feel free to submit pull requests, create issues or spread the word.

License

MIT © Kamran Ahmed