# Driver.js — Interactive Product Tours for the Web

> A lightweight JavaScript library for creating step-by-step guided tours and feature highlights with no external dependencies.

## Install

Save as a script file and run:

# Driver.js — Interactive Product Tours for the Web

## Quick Use
```bash
npm install driver.js
```
```js
import { driver } from "driver.js";
import "driver.js/dist/driver.css";
const d = driver({ showProgress: true });
d.highlight({ element: "#my-element", popover: { title: "Welcome", description: "This is the first step" } });
```

## Introduction
Driver.js is a vanilla JavaScript engine for creating interactive guided tours, feature introductions, and contextual help overlays. It uses no external dependencies and works across all modern browsers by manipulating a simple SVG overlay to focus attention on specific page elements.

## What Driver.js Does
- Highlights any DOM element with an animated overlay cutout
- Supports multi-step guided tours with previous/next navigation
- Provides non-intrusive popovers for feature announcements
- Allows programmatic control of tour flow and step transitions
- Works with any frontend framework (React, Vue, Svelte, Angular)

## Architecture Overview
Driver.js renders an SVG overlay on top of the page and calculates the bounding rectangle of each highlighted element. The library positions a popover adjacent to the cutout, handling scroll and resize events. All state is managed in a lightweight internal store with no virtual DOM.

## Self-Hosting & Configuration
- Install via npm, yarn, or pnpm, or load from a CDN script tag
- Import the CSS file for default popover and overlay styles
- Configure global options like animation duration, overlay color, and opacity
- Customize popover placement with `side` and `align` properties
- Hook into lifecycle callbacks: `onHighlightStarted`, `onHighlighted`, `onDeselected`

## Key Features
- Zero dependencies and under 5 KB gzipped
- Animated transitions between highlighted elements
- Keyboard navigation support with customizable shortcuts
- Mobile-friendly with responsive positioning
- Fully typed with TypeScript declarations included

## Comparison with Similar Tools
- **Intro.js** — More feature-rich but larger bundle size and requires a license for commercial use
- **Shepherd.js** — Uses Floating UI for positioning, heavier but more flexible theming
- **React Joyride** — React-specific wrapper; Driver.js is framework-agnostic
- **Guided Tour (Angular)** — Angular-only; Driver.js works with any stack

## FAQ
**Q: Does Driver.js work with single-page applications?**
A: Yes. You can trigger highlights programmatically on route changes or component mounts.

**Q: Can I style the popovers?**
A: Yes. Override the default CSS classes or pass custom popover render functions.

**Q: Is it accessible?**
A: Driver.js supports keyboard navigation and focus management out of the box.

**Q: Is a license required for commercial use?**
A: Driver.js is MIT-licensed and free for both personal and commercial projects.

## Sources
- https://github.com/kamranahmedse/driver.js
- https://driverjs.com

---
Source: https://tokrepo.com/en/workflows/asset-f967afbe
Author: Script Depot