driver.js

Lightweight JavaScript library for product tours, highlights, and contextual help for your product.

Supports all Major BrowsersWorks on Mobile DevicesHighly CustomizableLight-weightNo dependenciesFeature RichMIT LicensedWritten in TypeScriptVanilla JavaScriptEasy to useAccessibleFrameworks Ready

Red Hat

Alibaba

MIT

Ethereum

GitKraken

Apache

Intel

Fiverr

4M+ monthly downloads, used by tens of thousands of projects.

Examples

Click an example below to see driver.js in action, or find more in the documentation.

and much more ...

Use Cases

Due to its extensive API, driver.js can be used for a wide range of use cases.

Onboard Users

Explain how to use your product and answer common questions.

Interactive Tutorials

Walk users through tasks step by step, letting them act as they learn.

Feature Adoption

Spotlight new features so your users don't miss them.

Contextual Help

Provide in-context guidance right where your users need it.

Form Guidance

Guide users field by field and point straight to inputs that need fixing.

Remove Distractions

Highlight what matters and focus your users' attention.

Your first tour in seconds 🦊

Import driver.js, describe your steps, and call drive(). That's the whole setup.

import { driver } from "driver.js";
import "driver.js/dist/driver.css";

const driverObj = driver({
  showProgress: true,
  steps: [
    {
      element: "#search",
      popover: { title: "Search", description: "Find anything in seconds." },
    },
    {
      element: "#notifications",
      popover: { title: "Stay updated", description: "All your alerts live here." },
    },
    {
      element: "#profile",
      popover: { title: "Your account", description: "Manage settings and billing." },
    },
  ],
});

driverObj.drive();

import { driver } from "driver.js";
import "driver.js/dist/driver.css";

const driverObj = driver();

driverObj.highlight({
  element: "#new-feature",
  popover: {
    title: "New: Dark Mode 🌙",
    description: "Toggle the theme right from the toolbar.",
  },
});