No framework required
Use standards-based custom elements and the same typed workflow engine in any JavaScript application.
Vanilla
JavaScript product tour & onboarding library, no framework
@glowhop/vanilla-tour is the Vanilla adapter of GlowTour.js, an open-source product tour library for building onboarding tours, feature walkthroughs and guided tours in vanilla JavaScript.
Native browser custom elements for apps with no framework at all. registerGlowTourElements() and a plain tour property on the root are all the wiring you need.
Install
npm i @glowhop/vanilla-tour @glowhop/styles-tour28.6 KiB gzipped in total: 3.8 KiB of adapter over the shared 23.5 KiB engine, plus 1.3 KiB of theme CSS you can replace with your own.
Quick start
From examples/vanilla in the GlowTour.js repository - copy, paste, run.
import "@glowhop/styles-tour/default.css";
import {
createGlowTour,
registerGlowTourElements,
} from "@glowhop/vanilla-tour";
registerGlowTourElements();
const tour = createGlowTour();
const workflow = tour
.create("welcome")
.step({ id: "welcome-5", target: "#welcome", title: "Welcome", content: "Hello world!" })
.build();
const button = document.createElement("button");
button.id = "welcome";
button.type = "button";
button.textContent = "Start tour";
button.addEventListener("click", () => void tour.start(workflow));
document.body.append(button);
const root = document.createElement("glow-tour-default");
root.tour = tour;
document.body.append(root);How to build a Vanilla onboarding tour
Install the adapter and the default theme with npm i @glowhop/vanilla-tour @glowhop/styles-tour, then import "@glowhop/styles-tour/default.css" once, in your app entry or the component that renders the tour.
Call registerGlowTourElements() once, then createGlowTour() to get a tour instance.
Describe the onboarding tour with the builder: tour.create("welcome").step({ id, target, title, content }).build(), one step per element you want to highlight.
Add a <glow-tour-default> element to the page, assign the tour to its tour property, and call tour.start(workflow) from a DOM event.
Why use GlowTour.js for Vanilla product tours?
Small integration surface
Register the elements once, assign the tour instance, and start workflows from normal DOM events.
Works with existing stacks
Add guided onboarding to static sites, legacy applications, or framework-agnostic design systems.
Vanilla product tour FAQ
How do I create a product tour with vanilla JavaScript?
Install @glowhop/vanilla-tour and @glowhop/styles-tour, register the custom elements, create a tour and workflow, assign the tour to glow-tour-default, and start it from a DOM event.
Does GlowTour.js require React or another framework?
No. The vanilla adapter uses native custom elements, so it works without React, Vue, Angular, or Solid.
Can I customize the vanilla JavaScript tour UI?
Yes. Replace the default CSS theme or use the registered custom elements and core primitives to build a presentation that matches your application.
Is GlowTour.js an Intro.js alternative?
Yes. Like Intro.js, the vanilla adapter works on any website without a framework. Unlike Intro.js, which is AGPL-3.0 with a paid commercial license, GlowTour.js is MIT-licensed, and the same tours can move to React, Vue, Angular or Solid later.
How big is the Vanilla product tour library?
28.6 KiB gzipped in total: 3.8 KiB for @glowhop/vanilla-tour, 23.5 KiB for the shared core engine, and 1.3 KiB for the default theme CSS, which you can replace with your own. The core has no runtime dependencies.
Is @glowhop/vanilla-tour free for commercial use?
Yes. Every GlowTour.js package is MIT-licensed: free for commercial and closed-source products, with no paid tier and no attribution requirement.
Need the complete API and framework-specific setup? Read the Vanilla integration guide.