Comparison
Guide.js vs Driver.js
Tiny vanilla JS library — fast and dependency-free, but not React
Bundle
License
React
TypeScript
API style
Step types
Where Guide.js wins
- ✓ Native React component — no useEffect wiring needed
- ✓ Declarative step definitions as props
- ✓ Lifecycle callbacks as React-friendly event props
- ✓ Banner and Announcement step types
- ✓ Renders through React portals — no DOM side effects
Where Driver.js wins
- → Smaller bundle (~5 KB vs ~8 KB)
- → Works in any JS environment, no React required
- → Massive community (25.6k stars)
- → Zero npm dependencies
Driver.js is impressively small and has earned its 25k+ stars. In a vanilla JS or jQuery context it's an excellent choice. Inside React, you're fighting the framework: you wire it up in `useEffect`, manage a ref to the driver instance, and coordinate cleanup manually. There's no React component, no hooks, no portal-based rendering that integrates with React's tree.
React integration overhead
Using Driver.js in a React app requires manual bridging. You instantiate the driver in a `useEffect`, store it in a `useRef`, call `.drive()` imperatively, listen to events via callbacks passed at construction time, and call `.destroy()` in the cleanup function. Every re-render is a potential bug if you don't memoize correctly. Guide.js renders as a React component — it uses React's lifecycle, cleans up automatically, and re-renders when props change.
Bundle size context
Driver.js at ~5 KB is smaller than Guide.js at ~8 KB. The difference is real but modest — about 3 KB on the wire. If you're already in a React app (React itself is ~45 KB), the delta is a rounding error. The more meaningful cost is the bridging code you write to connect Driver.js to React's rendering model, which tends to be 50–100 lines of boilerplate per tour.
Step types
Driver.js renders a spotlight (darkened overlay with a cutout) and a popover positioned next to the target element. Both are element-anchored. Guide.js adds Dialog (unanchored centered modal), Banner (full-width bar), and Announcement (full-screen overlay) — patterns that Driver.js doesn't support natively and would require custom overlay components to replicate.
TypeScript and types
Driver.js is written in TypeScript and ships accurate types. Guide.js is also TypeScript-first. Both are strong here. The difference is how the types compose with your React components — Guide.js types (`TourInterface`, `StepInterface`, `StepConfigurationType`) are designed to work naturally with React prop types, while Driver.js types are shaped around its object construction pattern.
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.