Skip to content
Get packs

Guide · Open source

How to use driver.js: highlight elements and build product tours

Updated · written with AI from the project's own documentation and checked against our catalogue data

Driver.js is a JavaScript library that dims the page and spotlights a specific element with a popover, so a visitor's attention goes where you want it. This guide explains what it is good for, how to set up the local playground from the project's README, and where to find its documentation. By the end you will know whether it fits your web app and how to start exploring its examples.

Driver.jsnilbuild/driver.js · ★ 27k · MIT

Quick start

  1. 1Check prerequisites. Install Node.js and pnpm. The README does not state a Node.js version, so confirm requirements in the repository.
  2. 2Clone the repository. Run git clone on the nilbuild/driver.js repository to get the source.
  3. 3Install dependencies. Run pnpm install in the project root, then pnpm run playground:install for the playground.
  4. 4Start the playground. Run pnpm dev to open the Astro playground with live examples.
  5. 5Add or edit an example. Add a file under playground/src/examples/ in the matching group to see your own highlight or tour.
  6. 6Read the docs before shipping. Visit driverjs.com for demos and the documentation on options and hooks.

What driver.js does and who it is for

Driver.js is written in TypeScript and has no external dependencies. The README describes it as a library for product tours, feature introductions, contextual help, and simple modals. It also lists focus shifting and a keyboard-controllable interface.

It is aimed at web developers who are adding a tour or onboarding flow to an existing web app, teams introducing new features inside a site, and developers who want to highlight a form field or component with help text.

  • Product tours and onboarding flows
  • Feature introductions inside a web application
  • Contextual help, such as a popover over a dimmed background while a user fills a form
  • Simple modals and focus shifters

Install driver.js and open the playground

The README's local development setup uses Node.js and pnpm. It does not state a required Node.js version, so check the project's own files before you begin. Clone the repository, install dependencies, install the playground dependencies, and start the playground.

The library source lives in src/. The playground is an Astro app in playground/ that imports the library directly from source, so your edits hot-reload.

git clone https://github.com/nilbuild/driver.js pnpm install pnpm run playground:install pnpm dev

Explore and add examples in the playground

Each example is its own file under playground/src/examples/ and appears as a page in the sidebar. Examples are grouped into highlight.ts, popover.ts, tour.ts and api.ts.

To add an example, drop an entry into the group that fits. Use the playground to test how a highlight or tour behaves before wiring it into your own app.

  • Edit files under playground/src/examples/ to add a new example page
  • Use highlight.ts for element highlighting, popover.ts for popovers, tour.ts for tours and api.ts for API usage

Run build and test scripts

The README lists two further scripts for working on the library itself: one to build and one to run tests. Run them from the project root after installing dependencies.

pnpm build pnpm test

Find demos and full documentation

The README points to driverjs.com for demos and documentation. The excerpt does not include the full API reference, so use the site for option names and hooks.

The library provides hooks that run as elements are highlighted, about to be highlighted, or deselected, and several options that change its behaviour. Check the documentation for their exact names.

What people use it for

  • Add a product tour that walks new users through an existing web app
  • Announce a new feature by highlighting its button or panel
  • Show contextual help with a popover while a user fills in a form field
  • Draw attention to a specific component with a dimmed background
  • Use it as a simple modal overlay

Frequently asked questions

Is driver.js free to use?

Yes. The README says driver.js is MIT licensed and free for personal and commercial use. The license file is in the repository.

Does driver.js have dependencies?

The README says it has no external dependencies and describes it as about 5kb gzipped. Check the repository for the current package details.

How do I install driver.js?

The README's setup uses git clone followed by pnpm install, pnpm run playground:install and pnpm dev to run the playground. For documentation on adding it to your project, see driverjs.com.

Does driver.js need coding experience?

Yes. The README describes it as a code library with an API, so it is not a no-code tour builder. Basic web development skills are needed.

Which browsers does driver.js support?

The README claims support for all major browsers but does not list exact browser versions in the excerpt. Test in the browsers your users rely on.

How does driver.js compare to other tour libraries?

The README says it is lighter than other libraries, at about 5kb gzipped compared with 12kb or more for others. It also says tours are only one of its use cases.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Driver.js suits developers who want a light, dependency-free library to add tours, feature introductions or contextual help to an existing web app. It is a poor fit for people without web development experience or for teams that need a no-code tour builder, since the README describes only a code library.

Install options & downloads