what is driver.js fr?

nilbuild/driver.js — explained in plain English

Analysis updated 2026-06-21

★ 25,611TypeScriptAudience · developerComplexity · 2/5LicenseSetup · easy

vibe map

mindmap
  root((driver.js))
    What it does
      Spotlight overlay
      Element highlighting
      Popover tooltips
      Dim background effect
    Tech stack
      TypeScript
      No dependencies
      5KB compressed
    Use cases
      Product tours
      Onboarding guides
      Contextual help
      Focus overlays
    Audience
      Frontend developers
      Product builders
    Features
      Keyboard controllable
      All major browsers

mindmap root((driver.js)) What it does Spotlight overlay Element highlighting Popover tooltips Dim background effect Tech stack TypeScript No dependencies 5KB compressed Use cases Product tours Onboarding guides Contextual help Focus overlays Audience Frontend developers Product builders Features Keyboard controllable All major browsers

what do people make with this?

VIBE 1

Build a step-by-step product tour that walks new users through your app by highlighting each feature with a popover explanation.

VIBE 2

Highlight a specific form field with a dimmed background to focus user attention while they complete an action.

VIBE 3

Create contextual help overlays that spotlight a UI element when a user clicks a help icon.

what's the stack?

TypeScriptJavaScript

how it stacks up fr

	nilbuild/driver.js	wg-easy/wg-easy	hcengineering/platform
Stars	25,611	25,625	25,551
Language	TypeScript	TypeScript	TypeScript
Setup difficulty	easy	moderate	moderate
Complexity	2/5	3/5	4/5
Audience	developer	ops devops	developer

Figures from each repo's GitHub metadata at analysis time.

how do i run it?

Difficulty · easy time til it works · 5min

MIT licensed, use freely for any purpose including commercial projects with no restrictions.

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.

prompts (copy fr)

prompt 1

I want to add a product tour to my web app using Driver.js. Show me how to set up a multi-step tour that highlights the navbar, sidebar, and a save button in sequence.

prompt 2

How do I configure Driver.js to show a popover with a custom title and description text when highlighting an element?

prompt 3

I am using Driver.js and want the tour to only advance when the user clicks a specific button, not the built-in Next button. How do I control tour progression programmatically?

prompt 4

How do I trigger a Driver.js tour automatically only for first-time visitors by checking a localStorage flag?

Frequently asked questions