Product tours, five frameworks, one engine
Build product tours & onboarding tours in JavaScript
Show people around without writing a guide. GlowTour.js is an open-source JavaScript product tour library for onboarding tours, feature walkthroughs and guided tours in React, Vue, Angular, Solid and vanilla JavaScript.
npm i @glowhop/react-tour @glowhop/styles-tour
Product tour examples, live
Every example below runs for real - the code beside it is exactly what produced it.
Simple walkthrough
A plain, 3-step walkthrough - no special options, just steps.
Workspace settings
const tour = createGlowTour();
const workflow = tour
.create("welcome")
.step({
id: "workspace-name",
target: "#workspace-name",
title: "Start with the workspace name",
content: "A step can target any element - this one points at a plain field.",
})
.step({
id: "timezone",
target: "#timezone",
title: "Then the timezone",
content: "Chain as many .step() calls as the tour needs.",
})
.step({
id: "save-button",
target: "#save-button",
title: "A plain, non-interactive walkthrough",
content: "No special options here - no allowInteraction, no custom behavior.",
})
.build();
tour.start(workflow);A product tour library for your framework
Same workflow engine underneath - each adapter renders it the way that framework expects.
Works with Next.js, Nuxt, SolidStart and Angular SSR - server rendering verified in production builds.
Onboarding tours and other use cases
First-day onboarding
Take a new user straight to the parts of your product that matter today.
Surface a feature
Point a returning user at something you shipped that they haven't found yet.
In-place explanations
Describe an element right next to it, instead of sending people to your docs.
Tutorials that wait
Chain steps that advance on a real action, not another click-through slide.
Field-by-field guidance
Walk a multi-step form one field at a time, with placement that adapts to layout.
Fewer repeat tickets
Answer the question support hears every week before it's asked again.
What it costs you
Measured on the published packages, gzipped, at every release - not estimated. The engine is the same 23.5 KiB whichever adapter you pick.
| Framework | Adapter | Engine | Theme | Total |
|---|---|---|---|---|
| React | 0.3 KiB | 23.5 KiB | 1.3 KiB | 25.1 KiB |
| Vue | 0.1 KiB | 23.5 KiB | 1.3 KiB | 24.9 KiB |
| Solid | 0.3 KiB | 23.5 KiB | 1.3 KiB | 25.1 KiB |
| Angular | 3.8 KiB | 23.5 KiB | 1.3 KiB | 28.6 KiB |
| Vanilla | 3.8 KiB | 23.5 KiB | 1.3 KiB | 28.6 KiB |
Gzipped, with your framework treated as external. The theme (1.3 KiB) is plain CSS you can replace with your own.
How it compares to other tour libraries
GlowTour.js next to Intro.js, Driver.js, Shepherd.js and React Joyride, on the points where these product tour libraries differ most.
| Feature |  GlowTour.js | Intro.js | Driver.js |  Shepherd.js |  React Joyride |
|---|---|---|---|---|---|
| React | Native integration | Community wrapper | Compatible, no native adapter | Official wrapper | Native (React-only) |
| Vue | Native integration | Compatible, no official adapter | Compatible, no native adapter | Official wrapper | No |
| Angular | Native integration | Compatible, no official adapter | Compatible, no native adapter | Official wrapper | No |
| Framework-agnostic core | Yes | Yes | Yes | Yes | No |
| SSR & hydration | Verified in Next.js, Nuxt, SolidStart, Angular | Client-side only, import needs a DOM | Safe to import, client-side only | Safe to import, client-side only | SSR-safe, renders client-side only |
| Custom/composable UI | First-class (composable components) | Step options + CSS classes | CSS + DOM hooks | Step options + CSS classes | Custom React components |
| Chainable builder API | Yes (chainable) | No (steps option) | No (config object) | No (imperative addStep) | No (steps prop) |
| License | MIT | AGPL-3.0 or paid commercial | MIT | AGPL-3.0 or commercial | MIT |
- Built in
- Possible, with caveats
- Not supported
From each project's official docs and source, checked in September 2026.
MIT licensed, plainly
No tiers, no feature gates, no fine print.
- Personal projects
- Commercial products
- Unlimited projects
- No attribution required
Product tour features in the box
Placement & collision
popover.placementTryOrder and indicator.placementTryOrder walk top/bottom/left/right until one fits, falling back to center.
Interaction control
behavior.allowInteraction lets pointer events pass through the overlay to the target.
Scroll handling
Step and start-level scroll options control behavior, block, and inline scroll-into-view.
Lifecycle callbacks
onStart, onCancel, onFinish at the workflow level; beforeEnter and beforeLeave per step.
Step actions
.do(fn), .wait(ms), .waitUntil(fn), and .waitUntilElement(selector) sequence work between steps.
Target events
.onTargetEvent("click", fn) reacts to real DOM events on the current target.
Analytics-ready
One onEvent callback reports every start, step and exit - with the step id, how long it took, and whether the user used a button, the keyboard, or the overlay.
Accessible by default
Every adapter renders the same dialog role, aria-live description, keyboard shortcuts (Escape, arrows, Tab trap), and focus restoration on exit.
SSR-verified for React, Vue, Solid, Angular
Real renderToString/hydration coverage plus full Next.js, Nuxt, SolidStart and Angular SSR apps driven end to end with Playwright.
Product tour FAQ
What is a product tour library?
A product tour library highlights parts of your interface one step at a time, with an overlay and a popover that explains each element. It is how you build onboarding tours, feature announcements and in-app walkthroughs in your own code, without a hosted onboarding platform. GlowTour.js is an open-source product tour library for JavaScript and TypeScript.
How do I add an onboarding tour to my web app?
Install the GlowTour.js adapter for your framework and the default theme (for example npm i @glowhop/react-tour @glowhop/styles-tour), describe the steps with the builder (tour.create().step(...).build()), render the GlowTourDefault component once, and call start() when the user should see the tour. The getting started guide walks through it for every framework.
Which frameworks does GlowTour.js support?
React 18 and 19, Vue 3, Angular 18+, Solid and vanilla JavaScript, each with a native adapter over the same core engine. Server rendering is verified in Next.js, Nuxt, SolidStart and Angular SSR applications.
Is GlowTour.js free for commercial use?
Yes. GlowTour.js is MIT-licensed, so it is free for commercial and closed-source products with no paid tier and no attribution requirement. Intro.js and Shepherd.js, by comparison, are AGPL-3.0 with a paid commercial license.
Are GlowTour.js product tours accessible?
Yes. Every adapter renders the popover as a dialog with an aria-live description, keeps focus inside the popover while a step blocks the page, supports Escape, arrow keys and Tab, and restores focus when the tour ends. VoiceOver and NVDA are tested against every adapter in CI.
How big is GlowTour.js?
A complete install is 24.9 KiB to 28.6 KiB gzipped depending on the framework, including the core engine and the default theme CSS. The core has no runtime dependencies and the packages ship as tree-shakable ESM.
Your first onboarding tour, in one file
Install the adapter for your framework, import the default theme, and build your first workflow.