# Spotlight.js

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

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

- Tours and highlights: `import { spotlight } from "spotlight.js"` and `import "spotlight.js/dist/spotlight.css"`
- Hints: `import { hints } from "spotlight.js/hints"` and `import "spotlight.js/dist/hints.css"`
- Checklists: `import { checklist } from "spotlight.js/checklist"` with `import "spotlight.js/dist/spotlight.css"` and `import "spotlight.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 Spotlight.js with npm, yarn, pnpm, or a CDN script tag and add the modern, zero-dependency JavaScript tour and spotlight library to your project in seconds.
- [Basic Usage](https://driverjs.com/docs/basic-usage.md): Get started with Spotlight.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 Spotlight.js configuration option. Configure spotlight globally, per step, or on the fly, with full TypeScript autocomplete and type safety.
- [API Reference](https://driverjs.com/docs/api.md): Complete Spotlight.js API reference: every method available on spotlight, hints and checklist instances, including visual tour builder, sound, and celebrations.
- [Theming](https://driverjs.com/docs/theming.md): Theme Spotlight.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 Spotlight.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 Spotlight.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 Spotlight.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 Spotlight.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 Spotlight.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 Spotlight.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 Spotlight.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 Spotlight.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 Spotlight.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 Spotlight.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 Spotlight.js. See the latest features, changes, and fixes shipping in each release, plus what's currently in the works.