Guide.js v0.1

Comparison

Guide.js vs React Joyride

The most popular MIT-licensed React tour library — stateful and heavy

Bundle

Guide.js · ~8 KB React Joyride · ~26 KB

License

Guide.js · MIT React Joyride · MIT

React

Guide.js · Native React Joyride · Yes — React-native

TypeScript

Guide.js · First-class React Joyride · Yes

API style

Guide.js · Stateless React Joyride · Stateful — manages run / stepIndex

Step types

Guide.js · 4 types React Joyride · Tooltip, beacon, spotlight

Where Guide.js wins

  • ✓ Stateless — pass steps as props, no run/stepIndex to track
  • ✓ Smaller bundle (~8 KB vs ~26 KB)
  • ✓ Banner and Announcement step types
  • ✓ No callback state machine to implement

Where React Joyride wins

  • → Larger community (7.7k stars)
  • → Spotlight overlay — dims the background to focus the user
  • → Beacon markers — animated dots that pulse on target elements
  • → More battle-tested across browsers and frameworks

React Joyride is a solid MIT-licensed option and the most widely adopted React-native tour library. The v3 rewrite added a cleaner `useJoyride()` hook API. The friction is its stateful model: you own `run`, `stepIndex`, and a callback handler for every state transition. At ~26 KB gzipped it's also the heaviest option among React-native libraries.

The stateful API overhead

React Joyride requires you to manage `run` and `stepIndex` in your component state, and implement a `callback` prop that handles every tour event (step change, tour end, target not found, etc.) through a switch statement on `CallBackProps`. Every team using Joyride ends up writing roughly the same boilerplate. Guide.js takes steps as props — the tour starts when `isActive` is true and ends when it's false. No state machine.

Bundle size

React Joyride v3 reduced its size meaningfully compared to v2 by switching to `@floating-ui/react-dom`, but it still weighs in at approximately 26 KB gzipped. Guide.js is approximately 8 KB. For most apps this won't be the deciding factor, but in performance-sensitive contexts — mobile web, poor connections, core web vitals-focused products — the difference compounds.

Step types

Joyride supports tooltips anchored to elements, spotlight overlays (darkened backgrounds with a cutout around the target), and beacon markers (pulsing dots that invite users to start a tour). Guide.js trades the spotlight and beacon patterns for Banner and Announcement step types — full-width bars and full-screen modals. Which matters more depends on your onboarding design.

Migration from v2

If you're evaluating Joyride and already have a v2 implementation, v3 is a meaningful breaking change: the callback API changed, the hook API replaced some prop patterns, and the underlying positioning engine changed. Guide.js has a consistent API from v0.1 — there's no migration debt to inherit.

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

vs Shepherd.js vs Intro.js vs Driver.js vs Reactour vs Onborda Full comparison →

Ready to switch?

Install Guide.js in one command and render your first tour in under two minutes.

Quick start Star on GitHub