Create Guided Tours For Tutorials & New Features – Walkthrough.js

Category: Javascript | August 19, 2020
Author: ranbuch
Views Total: 944 views
Official Page: Go to website
Last Update: August 19, 2020
License: MIT


Create Guided Tours For Tutorials & New Features – Walkthrough.js


walkthrough.js is a lightweight, zero-dependency JavaScript library to create interactive guided tours for Tutorials & New Features of your website & app.

Key features:

  • Works with any 3rd framework.
  • Dynamic step creation.
  • Auto scrolls the page to the current step.
  • Highlights the current step (section).

How to use it:


$ npm install walkthrough-js --save

Import the walkthrough-js into the document.

<script src="dist/walkthrough.bundle.js"></script>

Add steps to the guided tour as follows:

let steps = [];

  title: 'Step 1',
  desc: 'This is Step 1',
  selector: '#step-1',
  selectorIndex: 0,
  element: null, // stage element
  autoread: true,
  fixMargin: true,
  fixPadding: true,
  top: 0, // top offset
  left: 0, // left offset
  onEnter: null, // onEnter callback
  onExit: null // onExit callback

  title: 'Step 2',
  desc: 'This is Step 2',
  selector: '#step-2',
  fixPadding: true

  title: 'Step 3',
  desc: 'This is Step 3',
  selector: '#step-3',
  fixPadding: true

// more steps here

Initialize the walkthrough library and done.

const wt = new Walkthrough();

Do something when finished.

  () => {
    console.log('Walkthrough Done!');


v0.0.8 (08/19/2020)

  • audit fix

You Might Be Interested In:

Leave a Reply