Vanilla

GlowTour.js for Vanilla

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.

Read the Vanilla guide Getting started

Install

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

25.8 KiB gzipped in total: 3.3 KiB of adapter over the shared 21.2 KiB engine, plus 1.4 KiB of theme CSS you can replace with your own.

@glowhop/vanilla-tour on npm · @glowhop/styles-tour on npm

Quick start

From examples/vanilla in the GlowTour.js repository - copy, paste, run.

import "@glowhop/styles-tour/default.css";
import {
  createDefaultTourElement,
  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.run(workflow));
document.body.append(button);

const root = createDefaultTourElement(tour);
document.body.append(root);