Tour
pura-tour walks through a sequence of targets (declared as pura-tour-step), highlighting each one with a spotlight over a native modal dialog and showing a coachmark anchored via CSS anchor positioning, with Back/Next/Done buttons, a step counter, and arrow-key navigation. Use it for onboarding, introducing new features, or guided walkthroughs. It is agent-native: each tour registers itself in window.__puraTours indexed by id, and the overlay carries stable, machine-readable attributes (data-pura-tour, data-step, data-total, data-running) plus correct ARIA, letting agents discover and drive the tour via start()/next()/back()/goTo()/stop().
Preview
<div style="display:grid;gap:1rem;max-width:420px">
<h2 id="passo-titulo">Account dashboard</h2>
<button id="passo-salvar" type="button">Save changes</button>
<a id="passo-ajuda" href="#">Help center</a>
<button id="iniciar-tour" type="button">Start tour</button>
</div>
<pura-tour id="tour-onboarding">
<pura-tour-step target="#passo-titulo" title="Welcome" placement="bottom">This is your main dashboard, where you manage your account.</pura-tour-step>
<pura-tour-step target="#passo-salvar" title="Save your changes" placement="bottom">Click here whenever you adjust something so you don't lose your progress.</pura-tour-step>
<pura-tour-step target="#passo-ajuda" title="Need help?" placement="top">Reach the help center anytime through this link.</pura-tour-step>
</pura-tour>
<script type="module">
import "/pura/lib/tour.js";
const tour = document.getElementById("tour-onboarding");
document.getElementById("iniciar-tour").addEventListener("click", () => tour.start());
</script>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
open | boolean | false | Reflects the tour's running state; present in the initial markup, it starts the tour automatically on connect. |
index | number | 0 | Current step (reflected). Changing the attribute while the tour is running navigates to that step via goTo(). |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/tour.js"></script>import "./pura/lib/tour.js";