Comparison
Guide.js vs Reactour
MIT-licensed React tour with SVG mask overlays and a context-provider API
Bundle
License
React
TypeScript
API style
Step types
Where Guide.js wins
- ✓ No provider wrapper — render <Guide> anywhere
- ✓ Stateless — no global context or hook required
- ✓ Banner and Announcement step types
- ✓ Single-package install, no split monorepo
Where Reactour wins
- → SVG mask overlay — precise keyhole cutout around the target
- → Render-prop API for completely custom tour card content
- → Fine-grained control over mask opacity and padding
Reactour is a legitimate MIT-licensed React option that has been around since 2017. The v3 rewrite brought a TypeScript-first monorepo split across `@reactour/tour`, `@reactour/mask`, and `@reactour/popover`. The context-provider model is idiomatic React, but it means wrapping your app in `<TourProvider>` and controlling tours through a `useTour()` hook from anywhere in the tree.
Context provider vs stateless component
Reactour's pattern is `<TourProvider steps={[...]}>` wrapping your app, then calling `useTour()` to open/close/navigate from any component. This is standard React context — nothing wrong with it technically. But it means the tour is a piece of global state rather than a local UI element. Guide.js renders as `<Guide isActive={bool} steps={[...]} />` wherever it makes sense in your tree, with no app-level setup.
Monorepo split
Reactour's v3 split the library into three separate packages: `@reactour/tour` (the main component), `@reactour/mask` (the SVG overlay), and `@reactour/popover` (the positioned tooltip). Each is individually versioned. This gives fine-grained control if you want just the mask or just the popover, but adds coordination overhead for most teams who just want tours to work. Guide.js ships as a single `guide.js` package.
SVG mask overlay
Reactour's most distinctive feature is its SVG-based mask that cuts a precise shape around the highlighted element. This gives a clean, polished keyhole effect. Guide.js doesn't have this — the Pointer step type highlights with positioning rather than an SVG mask. If the masked overlay is central to your design, Reactour has an edge here.
Community size
Reactour has ~4.1k GitHub stars — smaller than Joyride, Shepherd, and Driver.js. The library is actively maintained (last commit February 2026) but has a narrower ecosystem of examples and third-party integrations. Guide.js is newer and smaller still, but is backed by the Userorbit team with a clear development roadmap.
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.