Installation - Driver Js

Run one of the following commands to install the package:

bash

# Using npm
npm install driver.js

# Using pnpm
pnpm install driver.js

# Using yarn
yarn add driver.js

Alternatively, you can use CDN and include the script in your HTML file:

html

<script src="https://cdn.jsdelivr.net/npm/driver.js@latest/dist/driver.js.iife.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/driver.js@latest/dist/driver.css" />

<!-- Only if you use hints -->
<script src="https://cdn.jsdelivr.net/npm/driver.js@latest/dist/hints.iife.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/driver.js@latest/dist/hints.css" />

Start Using

Once installed, you can import the package in your project. The following example shows how to highlight an element:

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

const driverObj = driver();
driverObj.highlight({
  element: "#some-element",
  popover: {
    title: "Title",
    description: "Description",
  },
});

Hints ship as their own entry with a self-contained stylesheet, so import them only when you use them:

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

Note on CDN

If you are using the CDN, you will have to use the package from the window object:

const driver = window.driver.js.driver;

const driverObj = driver();

driverObj.highlight({
  element: "#some-element",
  popover: {
    title: "Title",
    description: "Description",
  },
});

The hints build exposes its own global:

const hints = window.driverHints.hints;

Continue reading the Getting Started guide to learn more about the package.