Comparison
Guide.js vs Intro.js
The oldest and most starred tour library — but commercially licensed
Bundle
License
React
TypeScript
API style
Step types
Where Guide.js wins
- ✓ MIT license — genuinely free for commercial use
- ✓ Native React component, not a DOM-attribute shim
- ✓ Stateless API fits modern React patterns
- ✓ Four step types vs tooltip-only
- ✓ No HTML data attributes needed
Where Intro.js wins
- → Largest ecosystem — 23.6k stars, extensive tutorials
- → Framework-agnostic — works anywhere JS runs
- → Hint markers (floating indicators) for async guidance
- → Ten-plus years of production hardening
Intro.js has the most GitHub stars of any tour library and over ten years of history. The AGPL license applies the same way as Shepherd — commercial products must pay ($9.99–$299.99). The data-attribute API (`data-intro`, `data-step`) was clever in 2013 but feels out of place in a modern React codebase. The React wrapper is community-maintained, not official.
License: AGPL for commercial apps
Intro.js uses AGPL-3.0 for free use — the same license as Shepherd.js. Any commercial product using Intro.js is technically required to open-source its entire application under AGPL, or purchase a commercial license. Pricing runs from $9.99 (Starter, 1 project) to $299.99 (Premium, unlimited). Guide.js is MIT — there is no license fee, no project limit, no legal ambiguity.
The data-attribute API in React
Intro.js works by reading `data-intro` and `data-step` attributes from your DOM. In vanilla JS or server-rendered HTML, this is convenient. In React, it means annotating JSX elements with data attributes and hoping Intro.js finds them after render. The result is tight coupling between your tour logic and your component markup. Guide.js keeps tour config entirely in JavaScript — steps are data, not DOM attributes.
React wrapper maintenance
The popular `intro.js-react` package is a community wrapper, not maintained by the Intro.js team. This creates a gap: the core library may update, fix bugs, or change behavior, and the React wrapper may not follow immediately. Guide.js has no such split — the library is the React component.
Step types and modern UX
Intro.js supports tooltip steps (anchored to elements) and floating hints. It doesn't have a dialog step for unanchored full-screen moments, a banner step for site-wide messages, or an announcement step for major product updates. These patterns are common in modern onboarding flows and require building custom solutions on top of Intro.js.
The Guide.js API
See for yourself
No boilerplate. No providers. Just a component.
import { Guide } from "guide.js";
import "guide.js/styles.css";
// Pass steps as props. That's it.
<Guide
tour={{ id: "onboarding", title: "Get started", steps }}
steps={steps}
isActive
/> Other comparisons
See how Guide.js stacks up
Ready to switch?
Install Guide.js in one command and render your first tour in under two minutes.