Mon Mar 02 2026, Marek Sotak

# Driver.js vs Intro.js vs Shepherd.js vs Reactour

### A practical guide to choosing an open-source walkthrough library (2026)

If you’re building in-app onboarding—feature tours, walkthroughs, spotlights, tooltips—you’ve probably noticed the same four libraries keep coming up:

- **Driver.js**
- **Intro.js**
- **Shepherd.js**
- **Reactour**

They all help you guide users through your UI, but they differ a lot in **developer experience**, **customization**, and (most importantly) **licensing**.

This guide compares them side-by-side, calls out real implementation pitfalls (SPAs, missing selectors, z-index wars), and ends with a simple “pick this if…” decision tree.

> Licensing is often the fastest way to narrow the field: **Driver.js and Reactour are permissive-license options**, while **Intro.js and Shepherd.js are AGPL unless you purchase commercial licenses**.

## What to evaluate first

Before choosing a library, define what success looks like in your app:

- **Reliability:** the step attaches to the right UI element every time (even after UI changes).
- **Customization:** it matches your product’s design system (not “default tour UI”).
- **SPA-friendly behavior:** steps survive route changes and async rendering.
- **Accessibility:** keyboard navigation, focus management, readable contrast.
- **Measurement:** completion rate, drop-off step, and adoption impact.

Open-source libraries can cover the UI layer well—but the rest (segmentation, analytics, localization, lifecycle management) is where teams often end up building lots of extra plumbing.

## Quick comparison table (what usually decides)

| Library | Best for | Tech fit | Customization | Typical “gotcha” | License (proprietary SaaS?) |
| --- | --- | --- | --- | --- | --- |
| **Driver.js** | Fast highlight<br>\+ focus tours | Vanilla JS<br>(works anywhere) | Strong defaults;<br>moderate theming | Handling async elements<br>& route changes | **MIT** (SaaS-friendly) | 
| **Intro.js** | Classic step tours<br>\+ lots of examples | Vanilla JS | Easy to start;<br>standard UI | **License constraints** in commercial apps | **AGPL** or buy commercial license | 
| **Shepherd.js** | Design-system-grade<br>custom tours | Works across<br>frameworks | Highly<br>customizable | More “bring your own UI” work | **Dual license:** AGPL or commercial | 
| **Reactour** | React-native<br>tours | React | Component-driven | Less ideal for non-React/mixed DOM | **MIT** |

**Practical takeaway:** if you’re building a closed-source SaaS and want to stay on permissive open-source licenses, the shortlist often starts with **Driver.js** or **Reactour**.

## Driver.js

**What it is:** A lightweight, dependency-free library for highlighting elements and guiding attention across a page.

### Where Driver.js shines

- **Fast implementation:** you can ship a walkthrough quickly.
- **Framework-agnostic:** great for apps with mixed stacks or server-rendered pages.
- **Great “spotlight” UX:** highlight + overlay is often enough for feature discovery.

### What to watch out for

- **Async UI:** steps can fail if elements aren’t mounted yet (common in SPAs).
- **Complex flows:** once you need conditional branches, deep state, or rich UI in popovers, you’ll do more custom work.

### Implementation notes (real-world)

- **Wait for elements:** don’t start the tour until targets exist (mounts, data loaded, modal opened).
- **Route changes:** if a step requires navigation, end the tour, navigate, then resume when the next page is ready.
- **Stable selectors:** add `data-tour="billing-upgrade-button"` style attributes so redesigns don’t break tours.

### License

Driver.js is MIT-licensed.

## Intro.js

**What it is:** A classic product tour library with a straightforward API and lots of familiarity in the ecosystem.

### Why teams pick Intro.js

- **Easy onboarding UI:** next/back flows and a predictable “tour” feel.
- **Low learning curve:** especially if you want standard guided steps.

### The big deal: licensing

Intro.js is **AGPL for open-source usage**, and it offers a **commercial license** for commercial applications where you want to keep your source proprietary.

If you’re building a closed-source SaaS, treat this as a procurement/legal decision, not just a technical one.

### Implementation notes (real-world)

- **SPA readiness:** Intro.js is DOM-driven; you still need guards for missing elements and async rendering.
- **Product iteration:** many teams underestimate how often tours break as UI evolves—plan maintenance time.

## Shepherd.js

**What it is:** A flexible guided tour library built for customization. Shepherd intentionally keeps default styling minimal so you can match your product UI closely.

### Where Shepherd.js shines

- **Highly customized tour UI:** great when the tour needs to look “native.”
- **Design system integration:** you can make steps feel like your own components.
- **Framework wrappers:** documentation points to wrappers (including React Shepherd) and multi-framework usage.

### What to watch out for

- **More setup:** you’re choosing Shepherd because you _want_ control—expect to put in the work.
- **License constraints:** Shepherd is dual-licensed and free for open-source/non-commercial use under AGPL, with a commercial license for commercial/proprietary use.

### Implementation notes (real-world)

- **Build a “tour shell” component:** standardize buttons, typography, spacing, and step layouts once.
- **Centralize targeting:** create a map of “tour targets” (by data attribute) to avoid scattered selectors.
- **Handle missing targets gracefully:** skip steps or show a fallback message if the UI isn’t available.

## Reactour

**What it is:** A React-first tour system that fits naturally into React apps with component-driven patterns.

### Where Reactour shines

- **React-native developer experience:** state-driven steps and conditional rendering are easier.
- **Great for SPAs:** fewer hacks to coordinate rendering + tour lifecycle.
- **Reusable building blocks:** better alignment with design systems in React apps.

### What to watch out for

- **Mixed stack complexity:** if you have non-React pages, a DOM-first library may be easier.
- **Target lifecycle:** you still need to ensure elements exist before a step tries to attach.

### Implementation notes (real-world)

- **Gate steps on state:** render the UI, then advance the step (instead of hoping the DOM is ready).
- **Persist progress:** store “last completed step” so users can resume after navigation.
- **Prefer stable refs/data attributes:** avoid brittle CSS selectors.

### License

Reactour is MIT-licensed.

## Choosing the right library: “pick this if…”

### Pick **Driver.js** if…

- You want **fast onboarding** with minimal dependencies.
- Your product isn’t purely React (or you have multiple frontends).
- You’re okay with “highlight + tooltip” style tours more than full custom onboarding UI.

### Pick **Reactour** if…

- You’re **all-in on React** and want the tour to behave like a React feature.
- Your onboarding needs conditional steps, state-aware content, or deep SPA integration.

### Pick **Shepherd.js** if…

- Your design team wants tours that look fully native to your UI.
- You’re willing to invest in customization _and_ you’re comfortable with the licensing model.

### Pick **Intro.js** if…

- You want a classic guided tour flow with a simple API and broad familiarity.
- You’re either open-source, or you plan to buy a commercial license for proprietary use.

## The parts open source doesn’t cover (until you build them)

Most teams discover the hard part isn’t rendering a tooltip—it’s everything around it:

- **Keeping tours up to date** when UI changes weekly
- **Targeting segments** (persona/role/plan/new-vs-power users)
- **Localization**
- **Analytics + experimentation** (which tours drive activation?)
- **Non-developer editing** (PM/CS teams iterating without code deploys)

If you only need a couple of lightweight tours, open source is often perfect. If you need onboarding to be a repeatable system—announcements, changelogs, checklists, segmentation, analytics—then you’ll want a layer above the raw tour rendering.

## Final recommendation

If you’re building a proprietary SaaS and want permissive licensing, start with:

- **Driver.js** (best all-around, framework-agnostic)
- **Reactour** (best if you’re React-first)

If you need deeper customization and you’re comfortable purchasing a license, consider:

- **Shepherd.js** (custom UI, strong flexibility)
- **Intro.js** (classic tour UX, simple API)