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. (GitHub)

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)

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. (GitHub)

Driver.js

What it is: A lightweight, dependency-free library for highlighting elements and guiding attention across a page. It’s framework-agnostic and works anywhere you can reference DOM nodes. (driverjs.com)

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. (GitHub)

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. (introjs.com)

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. (docs.shepherdjs.dev)

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. (docs.shepherdjs.dev)

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. (docs.shepherdjs.dev)

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. (GitHub)

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. (GitHub)

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. (driverjs.com)

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. (GitHub)

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. (docs.shepherdjs.dev)

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. (introjs.com)

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.

Where Inline Manual fits

Inline Manual is one option for teams that want to manage in-app guidance at scale, especially when they need:

• a central place to manage guidance content,
• rapid iteration without engineering bottlenecks,
• consistent UI patterns for announcements and onboarding,
• measurement and targeting that doesn’t require rebuilding your own platform.

In practice, teams often keep a small amount of hand-coded “micro-guidance” for highly bespoke flows and use a platform approach for content that changes frequently.

Try the Builder

If you want a quick hands-on test, you can use the Inline Manual Builder to create a walkthrough directly in the browser.

Final recommendation

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

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

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

• Shepherd.js (custom UI, strong flexibility) (docs.shepherdjs.dev)
• Intro.js (classic tour UX, simple API) (introjs.com)