Comparison
Guide.js vs Shepherd.js
Popular vanilla-first tour library with a commercial license requirement
Bundle
License
React
TypeScript
API style
Step types
Where Guide.js wins
- ✓ MIT license — no commercial restrictions whatsoever
- ✓ Native React component, not a bolted-on wrapper
- ✓ Stateless declarative API — no tour instance to manage
- ✓ Banner and Announcement step types Shepherd doesn't have
- ✓ Smaller bundle (~8 KB vs ~15 KB)
Where Shepherd.js wins
- → Large community and ecosystem (13.7k stars)
- → Works outside React (Angular, Vue, Ember, vanilla)
- → More customization hooks and events API
- → Longer track record in production
Shepherd.js is widely used and well-documented, but the AGPL license is a hard stop for any closed-source or commercial product without paying $50–$300 for a commercial license. React support is a separate wrapper package that lags behind the core library. If you're in a React app and shipping commercially, Shepherd is not legally free.
License: the AGPL problem
Shepherd.js is licensed under AGPL-3.0 for open source use. AGPL requires that any product using the library — including your SaaS app — must release its entire source code under AGPL if distributed over a network. For most commercial products, this is a non-starter. Shepherd sells commercial licenses starting at $50 (5 projects) and $300 (unlimited). Guide.js is MIT — use it however you want, in any product, forever.
React integration
Shepherd.js is a vanilla JS library at its core. The React integration lives in a separate `react-shepherd` package maintained alongside the core. This means the React API can lag behind, and you're relying on a wrapper abstraction rather than a component designed for React's rendering model. Guide.js is a React component from the ground up — it uses refs, portals, and React's lifecycle correctly without manual bridging.
API style
Shepherd builds tours through an imperative, event-driven object API: you create a `new Shepherd.Tour()`, add steps with `.addStep()`, attach event listeners, and call `.start()`. In React, this means wiring up `useEffect` hooks, storing the tour instance in a ref, and manually destroying it on unmount. Guide.js takes steps as props and renders — no instance management, no effect cleanup.
Step types
Shepherd supports tooltip/callout steps that attach to page elements, with an optional modal overlay to highlight the target. Guide.js adds two step types Shepherd doesn't have: Banner (a dismissible bar for site-wide messages) and Announcement (a full-screen modal for major moments). If your onboarding flow includes anything beyond element callouts, Shepherd will require custom workarounds.
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.