Guided tours, five frameworks, one engine
Show people around, without writing a guide.
Build accessible, customizable product tours and user onboarding flows with native adapters for React, Vue, Solid, Angular, and vanilla JavaScript.
npm i @glowhop/react-tour @glowhop/styles-tour
Try it, then read it.
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.run(workflow);Pick your framework
Same workflow engine underneath - each adapter renders it the way that framework expects.
Where teams actually use it
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 21.2 KiB whichever adapter you pick.
| Framework | Adapter | Engine | Theme | Total |
|---|---|---|---|---|
| React | 0.3 KiB | 21.2 KiB | 1.4 KiB | 22.9 KiB |
| Vue | 0.1 KiB | 21.2 KiB | 1.4 KiB | 22.7 KiB |
| Solid | 0.3 KiB | 21.2 KiB | 1.4 KiB | 22.9 KiB |
| Angular | 3.6 KiB | 21.2 KiB | 1.4 KiB | 26.1 KiB |
| Vanilla | 3.3 KiB | 21.2 KiB | 1.4 KiB | 25.8 KiB |
Gzipped, with your framework treated as external. The theme (1.4 KiB) is plain CSS you can replace with your own.
MIT, plainly
No tiers, no feature gates, no fine print.
- Personal projects
- Commercial products
- Unlimited projects
- No attribution required
What's actually 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; beforeAdvance, beforePrevious, beforeCancel 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
Real renderToString/hydration coverage plus full Next.js, Nuxt, and SolidStart apps driven end to end with Playwright.
Your first tour, in one file
Install the adapter for your framework, import the default theme, and build your first workflow.