Stepr

Guided product tours, without the framework.

Stepr highlights any element, explains it in a tooltip and walks people through your interface. It is written in TypeScript, has no dependencies and works with keyboards and screen readers.

npm install stepr

Spotlight

Dims the page except for one element. The cutout follows the target through scrolling and resizing, and the overlay never blocks clicks.

Reports
Billing
const spotlight = createSpotlight();

spotlight.show('#reports'); // false if there's no such element
spotlight.destroy();

Tooltip

Places text next to an element. The placement is a preference: if there isn't room, the tooltip flips or shifts to stay in the viewport. Content is always rendered as plain text.

Export

Multi-step tour

Combines both into a sequence with Back, Next and Close buttons and a step counter. Steps whose targets aren't on the page are skipped. This tour walks through the sample app at the top of the page, then returns you here. 

const tour = createTour({
  steps: [
    {
      target: '#app-new',
      title: 'Create an invoice',
      description: 'Start here when you have work to bill.',
    },
    {
      target: '#app-search',
      title: 'Find anything',
      description: 'Search by customer, amount or date.',
    },
    // ...
  ],
  onComplete: () => log('onComplete called'),
  onExit: () => log('onExit called'),
});

tour.start();

Keyboard and Escape

Tours work without a mouse. Focus moves to the Next button when a tour starts and returns to where it was when the tour ends. Try it: focus the button below with Tab, press Enter, then press Escape.

Key Action
Enter or Space Activates the focused Back, Next or Close button
Tab and Shift+Tab Follow the normal page order, including page content
Escape Exits the tour from anywhere on the page

Customization

Spotlights and tooltips take options, and CSS custom properties theme every tooltip. Tours use the theme but keep the default spotlight and placement.

Settings