explaingit

nilbuild/driver.js

★ 25,648TypeScriptAudience · developerComplexity · 2/5MaintainedLicenseSetup · easy

TLDR

Lightweight JavaScript library that highlights specific page elements with a spotlight effect and dims the rest, perfect for building product tours and user onboarding guides.

Mindmap

mindmap
  root((driver.js))
    What it does
      Spotlight effect
      Dims background
      Popover tooltips
      Keyboard control
    Use cases
      Product tours
      Feature onboarding
      Contextual help
      Focus direction
    Tech stack
      TypeScript
      JavaScript
      No dependencies
    Key features
      5KB compressed
      All browsers
      MIT licensed
      npm package

Things people build with this

USE CASE 1

Build step-by-step product tours that guide new users through your app's features with highlighted elements and explanatory popovers.

USE CASE 2

Add contextual help overlays that dim the background while users fill out forms or complete specific tasks.

USE CASE 3

Create focus-directing highlights on individual page elements to draw attention during user interactions or announcements.

USE CASE 4

Implement modal-style overlays or 'lights off' effects similar to video player controls for better visual isolation.

Tech stack

TypeScriptJavaScript

Getting it running

Difficulty · easy Time to first run · 5min
Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

In plain English

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.

Copy-paste prompts

Prompt 1
Show me how to set up Driver.js to create a 5-step product tour for my web app, with each step highlighting a different button and showing explanatory text.
Prompt 2
How do I use Driver.js to highlight a form field and show a help popover when a user clicks a question mark icon?
Prompt 3
Create a Driver.js example that dims the entire page except for a modal dialog, with keyboard navigation to close it.
Prompt 4
How can I programmatically trigger Driver.js highlights based on user actions, like showing a spotlight when they hover over a feature?
Prompt 5
Show me how to customize the spotlight color, popover position, and animation speed in Driver.js for my brand.
Open on GitHub → Explain another repo

Generated 2026-05-18 · Model: sonnet-4-6 · Verify against the repo before relying on details.