# Driver.js

> Lightweight, dependency-free JavaScript library for product tours, element highlights, feature hints and onboarding checklists. Works with any framework.

Install with `npm install driver.js`. Each feature is its own entry with its own stylesheet:

- Tours and highlights: `import { driver } from "driver.js"` and `import "driver.js/dist/driver.css"`
- Hints: `import { hints } from "driver.js/hints"` and `import "driver.js/dist/hints.css"`
- Checklists: `import { checklist } from "driver.js/checklist"` and `import "driver.js/dist/checklist.css"`

Every page below is Markdown. Drop the `.md` suffix for the HTML version.

## Introduction

- [Installation](https://driverjs.com/docs/installation.md): Install Driver.js with npm, yarn, pnpm, or a CDN script tag and add the lightweight, zero-dependency JavaScript tour library to your project in seconds.
- [Basic Usage](https://driverjs.com/docs/basic-usage.md): Get started with Driver.js: import the library, configure your steps, and create your first multi-step product tour or element highlight in minutes.
- [Configuration](https://driverjs.com/docs/configuration.md): Explore every Driver.js configuration option. Configure the driver globally, per step, or on the fly, with full TypeScript autocomplete and type safety.
- [API Reference](https://driverjs.com/docs/api.md): Complete Driver.js API reference: every method available on the driver, hints and checklist instances, with examples.
- [Theming](https://driverjs.com/docs/theming.md): Theme Driver.js to match your brand. Apply custom classes and CSS to the popover, buttons, overlay, hints and checklists, or restyle the driver from the ground up.

## Examples

- [Tour Basics](https://driverjs.com/docs/tour-basics.md): Build a multi-step product tour with Driver.js. Animate between steps or jump instantly, tune the animation speed, and show a step counter like 1 of 5.
- [Interactive Tours](https://driverjs.com/docs/interactive-tours.md): Build Driver.js tours that react to your app: advance when users click the highlighted element, wait for elements that render on demand, run async logic between steps, and continue across pages.
- [Ending a Tour](https://driverjs.com/docs/ending-a-tour.md): Control how a Driver.js tour ends. Ask users to confirm before they leave, stop them from exiting early, and tell a finished tour apart from one that was closed.
- [Simple Highlight](https://driverjs.com/docs/simple-highlight.md): Highlight any element on the page with Driver.js. Spotlight a single element and show a popover to deliver contextual help, beyond just product tours.
- [Popover](https://driverjs.com/docs/popover.md): Position Driver.js popovers with the side and align options, choose which buttons they show, change the button text, and add your own buttons and click handlers.
- [Styling](https://driverjs.com/docs/styling.md): Style Driver.js popovers with your own CSS class or the onPopoverRender hook, change the overlay color and opacity, and theme checklists to match your product's look.
- [Feature Hints](https://driverjs.com/docs/hints.md): Add pulsing hint beacons to your UI with Driver.js. Users click a beacon to open a popover explaining the feature. Style the beacons and popovers to match your product.
- [Checklists](https://driverjs.com/docs/checklists.md): Add an onboarding checklist to your app with Driver.js. Items launch product tours, follow links or wait for the user to do something, and tick themselves off as users make progress.
- [Checklist Themes](https://driverjs.com/docs/checklist-themes.md): Ready-made themes for Driver.js checklists: dark mode, gradient header, GIF banner, numbered steps, progress ring, cards, compact and a completion celebration. Copy the CSS and go.

## Optional

- [Full documentation in one file](https://driverjs.com/llms-full.txt)
- [Migrate to 1.x](https://driverjs.com/docs/migrating-from-0x.md): Upgrade from Driver.js 0.x to 1.x with this step-by-step migration guide covering the new API, imports, and architecture changes in the 1.0 rewrite.
- [Changelog](https://driverjs.com/docs/changelog.md): Track what's new in Driver.js. See the latest features, changes, and fixes shipping in each release, plus what's currently in the works.