Solid product tour & onboarding library

import { Show } from "solid-js";
import { render } from "solid-js/web";
import "@glowhop/styles-tour/default.css";
import { GlowTourDefault, useGlowTour } from "@glowhop/solid-tour";

function TourApp() {
  const { tour, create, start, cancel, status, currentStepIndex, totalSteps } = useGlowTour();

  const workflow = create("product-tour")
    .step({
      id: "features",
      target: '[data-tour="features"]',
      title: "Explore features",
      content: "Learn about all the capabilities.",
    })
    .step({
      id: "pricing",
      target: '[data-tour="pricing"]',
      title: "Check pricing",
      content: "See plans that fit your needs.",
    })
    .build();

  return (
    <>
      <main>
        <section data-tour="features">
          <h2>Features</h2>
          <p>We offer guided tours, SSR support, and full keyboard navigation.</p>
        </section>
        <section data-tour="pricing">
          <h2>Pricing</h2>
          <p>Open source and free.</p>
        </section>
        <Show
          when={status() === "active"}
          fallback={<button onClick={() => void start(workflow)}>Start tour</button>}
        >
          <p>
            Step {currentStepIndex() + 1} of {totalSteps()} <button onClick={() => void cancel()}>Stop</button>
          </p>
        </Show>
      </main>
      <GlowTourDefault tour={tour} />
    </>
  );
}

render(() => <TourApp />, document.getElementById("app")!);