driver.js
A lightweight, dependency-free JavaScript library for guiding user focus across the page.
A dependency-free 5KB JavaScript library that creates spotlight overlays to highlight page elements, used for product tours, onboarding guides, contextual help, and focus overlays.
Driver.js is a small JavaScript library that draws attention to specific elements on a web page — highlighting them with a spotlight effect and dimming everything else around them. The most common use is building product tours: step-by-step guides that walk new users through an application's features by pointing out each part of the interface in sequence, with an explanation shown in a popover (a small tooltip-like bubble).
But tours are just one use case. The library can also highlight a single element to draw a user's focus while they interact with something else, show contextual help with a dimmed background while a user fills out a form, create modal-style overlays, or simulate a "Turn off the Lights" effect like those on video players. All of these share the same underlying mechanism: a configurable overlay that isolates part of the page visually.
Driver.js is written in TypeScript, has no external dependencies, and weighs about 5 kilobytes compressed — making it one of the lightest options in this category. It is keyboard-controllable and works across all major browsers. You would use it when building a web application where you need to onboard new users, explain features contextually, or direct attention to a specific part of the interface. It is available as an npm package and is MIT licensed.
Where it fits
- Build a step-by-step product tour that walks new users through your app by highlighting each feature with a popover explanation.
- Highlight a specific form field with a dimmed background to focus user attention while they complete an action.
- Create contextual help overlays that spotlight a UI element when a user clicks a help icon.