6 Best JavaScript Product Tour Libraries in 2026

The quick answer

Quick answer: Shepherd.js is the most complete framework-agnostic choice. Driver.js is the smallest thing that works, with no dependencies. Intro.js is capable and not MIT-licensed — commercial use needs a paid licence, which is the single most common surprise in this category. React Joyride and Reactour are the React-shaped options, the first heavier and more capable, the second lighter. Floating UI is not a tour library at all but is what you reach for when you are building the positioning layer yourself. Check licences first; the APIs are more alike than the terms are.

Library or platform? The question that decides it

Every library on this list solves the same visible problem: put a highlighted box next to an element and step through a sequence. That is the part that demos well and the part that takes an afternoon. What decides whether a library was the right choice is everything that is not rendering — targeting, persistence, resilience when the DOM changes, content updates without a deploy, and measurement. Those are covered further down, honestly, because they are the work that arrives in month two.

At-a-glance comparison

Licence terms checked September 2026 and they do change — verify on each project's own site before you ship, not after legal asks.

The libraries, honestly

Shepherd.js is the default recommendation for a reason: mature, framework-agnostic, good keyboard and focus handling, and a step model that survives real applications. If you have no strong constraint, start here.

Driver.js wins on size. No dependencies, a small API, and enough capability for a linear tour with highlights. If the requirement is genuinely "walk a user through four things once", it is hard to justify anything larger.

Intro.js is a good library with a licence that catches people out. It is dual-licensed rather than MIT, and commercial use requires payment. Nothing wrong with that — it is a legitimate model and the project is well maintained — but teams install it the way they install any npm package and find out later. Check first.

React Joyride and Reactour both give React apps a component-shaped API instead of an imperative one, which matters more than it sounds when tours need to react to application state. Joyride is the heavier and more capable; Reactour is lighter and quicker to reason about.

Floating UI belongs here as the honest bottom layer. It does positioning — anchoring, collision detection, flipping — and nothing else. Several of the libraries above use it or something like it internally. Reach for it when you are building a tour into your own design system and want the hard geometry solved.

What a library makes you build

Five things, in roughly the order teams hit them. Targeting: which users see this tour, once, and not again — which means a persistence store and a rule layer, not a localStorage flag, as soon as a user has two devices. Resilience: what happens when the element the step points at does not exist yet, or never renders. This is the one that produces the worst user-visible failure and it is covered in our SPA tour target recovery specification.

Content changes: every copy edit is a deploy unless you build a content store. Measurement: a library fires callbacks; turning those into an answer about whether the tour helped needs an exposure model and a definition of completion, which our completion-versus-activation report covers. And non-developer editing: if anyone outside engineering will change a tour, that is a product you are now maintaining internally.

None of that argues against libraries. For a handful of tours owned permanently by a developer, a library is clearly right and a platform is overhead. The honest split is by who edits the tours and how much you need to know about their effect — and PLG OS exists on the other side of that line, so take this framing as ours and check it against your own situation.

FAQs

Which library should I start with?
Shepherd.js if you have no constraint, Driver.js if size matters, Joyride or Reactour in React. Verify the licence before the API.

Is Intro.js free?
Not for commercial use under an open-source licence. It is dual-licensed and commercial use requires a paid licence — check current terms on their site.

When does a library stop being enough?
When a non-developer needs to edit tours, when you need targeting across devices, or when you need to know whether the tour changed behaviour. All three are buildable; all three are more work than the tour itself.