Glowhop/GlowTour.js: Guided product tours and onboarding walkthroughs for React, Vue, Solid, Angular and vanilla JS. Accessible, SSR-verified, zero dependencies.

Guided product tours and onboarding walkthroughs for React, Vue, Solid, Angular and vanilla JS. Accessible, SSR-verified, zero dependencies. - Glowhop/GlowTour.js

Summary

GlowTour.js is a TypeScript library for guided product tours and onboarding walkthroughs across React, Vue, Solid, Angular, and vanilla JavaScript. It separates a framework-agnostic engine from native per-framework adapters and ships with no third-party runtime dependencies. The core is ESM-only, accessible by default, and SSR-verified against Next.js, Nuxt, SolidStart, and Angular apps.

What it is useful for

GlowTour.js fits when you need in-app onboarding flows, feature spotlights, or step-by-step walkthroughs that must work the same way across multiple frontends or inside a shared component library. Each adapter is a native component for its framework rather than a wrapper, and accessibility features (role="dialog", aria-live step descriptions, focus trap, focus restoration, Escape and arrow-key shortcuts) are baked in.

Theming is handled through CSS custom properties such as --glow-tour-color-accent and --glow-tour-radius, so a single ancestor class re-skins every popover without rebuilding components. An onEvent callback reports tour starts, step changes, and exits with the step id and duration, which makes it straightforward to feed product analytics. It also documents .do(), .wait(), .waitUntil(), .waitUntilElement(), and .onTargetEvent() for sequencing real DOM events or async work between steps instead of jumping instantly.

How engineers can use it

Pick the adapter for your framework and install the default theme. The README shows:

npm i @glowhop/react-tour @glowhop/styles-tour

Documented commands also exist for @glowhop/vue-tour, @glowhop/solid-tour, @glowhop/angular-tour (Angular 18), and @glowhop/vanilla-tour (custom elements), each paired with @glowhop/styles-tour. A createGlowTour() factory builds a workflow with .step() calls; mounting the adapter component connects the renderer, and tour.start(workflow) runs the tour.

Theming via CSS custom properties on an ancestor class, such as a .terminal-tour block overriding --glow-tour-* tokens, recolors the popover. Light and dark themes ship together, and data-glow-tour-theme="dark" on a wrapper pins one. A JSON configuration path is also documented for non-code workflows.

Documented limitations: the library is ESM-only, and each adapter targets a specific framework version (React 18/19, Vue 3, Angular 18). For server-rendered apps the README points to a compatibility doc; for build-your-own adapters, @glowhop/core-tour/adapter is the entry point. Contribution steps use Bun, but end users do not need Bun. The package is MIT licensed.