Interactive Guide For Web App – Driver.js

Category: Javascript , Recommended | June 30, 2018
Author: kamranahmedse
Views Total: 351
Official Page: Go to website
Last Update: June 30, 2018
License: MIT


Interactive Guide For Web App – Driver.js


Driver.js is a lightweight yet powerful JavaScript library to create an animated, interactive, user-friendly visual guide for any web elements.


  • With or without animations.
  • With or without background overlay.
  • Highlights web elements when the guide is active.
  • Popover style step-by-step guide.

Basic usage:


# Yarn
$ yarn add driver.js

$ npm install driver.js --save

Insert the Driver.js’ JavaScript and CSS files into the html document.

<link rel="stylesheet" href="/path/to/driver.min.css">
<script src="/path/to/driver.min.js"></script>

Create new Driver instance and we’re ready to go.

const myDriver = new Driver();

Highlight a specific element within the document.


Highlight a specific element with a popover.

  element: '#element',
  popover: {
    title: 'Popover Title',
    description: 'Description',

Create a step-by-step guide.

// define your steps
    element: '#element-1',
    popover: {
      title: 'Title 1',
      description: 'Desc 1',
      position: 'left'
    element: '#element-2',
    popover: {
      title: 'Title 2',
      description: 'Desc 2',
      position: 'right'
    element: '#element-3',
    popover: {
      title: 'Title 3',
      description: 'Desc 3',
      position: 'right'

// start the guide

All possible options for the Driver.js.

const driver = new Driver({

      // enable the animation
      animate: true,

      // background opacity
      opacity: 0.75,   

      // padding of element                 
      padding: 10, 

      // is closable?
      allowClose: true, 

      // Allow controlling through keyboard (escape to close, arrow keys to move)
      keyboardControl: true,

      // Whether the click on overlay should move next
      overlayClickNext: false,      

      // text on the Done button
      doneBtnText: 'Done', 

      // text on the Close button
      closeBtnText: 'Close',    

      // background color        
      stageBackground: '#ffffff',

      // text on the Next button
      nextBtnText: 'Next',

      // text on the Prev button
      prevBtnText: 'Previous',

      // shows navigation buttons
      showButtons: false,

      // scrollIntoView options
      scrollIntoViewOptions: {},

      // callback functions
      onHighlightStarted: (Element) {},
      onHighlighted: (Element) {}, 
      onDeselected: (Element) {},  
      // Called when overlay is about to be cleared
      onReset: () {},       


v0.6.0 (06/30/2018)

  • Add support for asynchronous actions

v0.5.2 (05/23/2018)

  • Add keyboardControl option and typo in readme

Leave a Reply