Skip to content
Guidepost Guidepost

Guidepost

Accessible product tours built on native browser primitives. No positioning library, no portals, no z-index war, no hand-rolled focus trap.

MIT licensed. 9.4 kB minified + gzipped, stylesheet included. Zero runtime dependencies.

Terminal window
npm install @cmunns/guidepost
import { Tour } from '@cmunns/guidepost';


const tour = new Tour({
  id: 'onboarding',
  steps: [
    { title: 'Welcome', text: 'A quick tour.', placement: 'center' },
    { target: '#sidebar', title: 'Navigation', text: 'Everything lives here.', placement: 'right-start' },
    { target: '#search', title: 'Try it', text: 'Type to continue.', focus: 'target',
      advanceOn: { event: 'input', when: (e) => e.target.value.length > 2 } },
  ],
});


tour.start();

Every example in these docs runs live at the live demo.

What it is built on

Popover API

The card renders in the top layer. No portals, no z-index escalation, no escaping overflow: hidden.

CSS anchor positioning

The browser keeps the card tethered to its target. A measured JS fallback covers browsers that do not have it yet.

clip-path spotlight

One element, and the hole is click-through for free — so the user can complete the action the step is describing.

inert

The focus trap is the platform’s. Untabbable, unclickable, and hidden from screen readers, with no keydown interception and no sentinel nodes.

Where to go next

Install

Install the package and decide who owns the CSS pipeline.

Quick start

Quick start — a tour is an array of steps and a call to start().

Blocking modes

Blocking modes — three combinations, and the choice matters more than any styling decision.